Component API

<form-field>

Open live example

Per-field wrapper for a form control: label, slotted control, and an
optional hint or error message, in one consistent unit repeated across a
form. Purely presentational — composes whatever control is slotted
(form-select, multi-select, autocomplete-input, ui-checkbox, etc.)
without intercepting its events or value.

Set floating-label for supported text controls (input, textarea,
autocomplete-input, address-autocomplete, and text-area). The label
then rests inside an empty field and moves to a smaller top-left position
while focused or non-empty. Other controls keep the external label.

The label wraps the default slot for a best-effort visual/click
association only: every existing value-entry control encapsulates its
real <input> inside its own shadow DOM, so there is no light-DOM id a
for attribute could target from outside, and this component cannot set
aria-describedby/aria-invalid on an arbitrary slotted control's
shadow-encapsulated input for the same reason. The error message uses
role="alert" as the practical accessibility mitigation instead of true
aria-describedby association.

Install

import "@f-ewald/components/form-field.js";

Usage

<form-field label="Task state" hint="Only affects your own view">
  <form-select></form-select>
</form-field>
<form-field label="Terms" required error="You must accept to continue">
  <ui-checkbox label="I agree to the terms"></ui-checkbox>
</form-field>
<form-field floating-label label="Email">
  <input type="email" placeholder="name@example.com" />
</form-field>
<form-field floating-label label="Language">
  <autocomplete-input clearable placeholder="Start typing…"></autocomplete-input>
</form-field>

Attributes / properties

PropertyAttributeTypeDefaultDescription
labellabelstring""Field label text.
hinthintstring""Optional helper text shown below the control when there's no error.
errorerrorstring""Optional error text; replaces the hint display when non-empty.
requiredrequiredbooleanfalseShows a required indicator next to the label.
floatingLabelfloating-labelbooleanfalseMoves labels inside supported text controls until they receive focus or content.

Events

None.

Slots

None.

CSS custom properties

Custom property
--ui-border
--ui-border-width
--ui-danger
--ui-focus-ring
--ui-font
--ui-font-size
--ui-font-size-sm
--ui-font-size-xs
--ui-font-weight-medium
--ui-font-weight-regular
--ui-line-height-normal
--ui-line-height-tight
--ui-primary
--ui-radius-sm
--ui-surface
--ui-text
--ui-text-muted