Forms
Field
An accessible layout wrapper for one form control.
An accessible layout wrapper for a single form control: a label, the control, optional help text, and a validation message, all wired together. In the framework bindings, Hydrateless inputs placed inside a Field pick up its id, aria-describedby, aria-invalid, and required automatically; useField() exposes the same wiring for custom controls. CSS-only.
Field
We never share it.
Invalid state
Add data-hl-invalid to the field, aria-invalid="true" to the control, and render an .hl-error message referenced by aria-describedby.
Enter a valid email address.
Custom controls with useField
Any control can join a Field. useField() returns { id, describedBy, invalid, required } (or null outside a Field) so you can wire your own element.
Used for links and buttons.
Props
The framework bindings expose these props (and forward the rest to the root element).
| Prop | Type | Default | Description |
|---|---|---|---|
required | boolean | false | Show the required marker on the label and set `required` on the wired control. |
invalid | boolean | false | Apply the error styling and set `aria-invalid="true"` on the wired control. |
CSS variables
Override these on any ancestor to theme the component. See the theme studio to preview changes live.
| CSS variable | Used for |
|---|---|
--hl-fg-muted | Help text color. |
--hl-danger-subtle-fg | Error text and required marker color. |
--hl-space-1-5 | Gap between label, control, and message. |
Accessibility
- The label is associated with the control through
for/id, and help and error text througharia-describedby, so both are announced on focus. - Set
aria-invalid="true"on the control when invalid so the error is announced; the frameworkFielddoes this for you.