Form field
stable 1.4 kB<hk-form-field>The wiring layer: it generates ids, links label, hint and error with aria-describedby, and flips to the error skin — for any control you put inside it.
#label#validation
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| label | string | '' | Field label. Linked to the projected control by generated id. |
| hint | string | '' | Helper line, replaced by error when that is set. |
| error | string | '' | Error message. Sets aria-invalid on the control. |
| required | boolean | false | Marks the label and sets the required attribute. |
| labelHidden | boolean | false | Keeps the label for assistive tech but hides it visually. |
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-field-gap | 0.375rem | Space between label, control and message. |
| --hk-field-error | #b91c1c | Error text colour. |
Accessibility
- Ids are generated and wired automatically, so the label always points at the real control.
- Hint and error are joined into one aria-describedby, so both are announced in order.
- Required is conveyed through the attribute, not just the asterisk.