Forms

Field

An accessible layout wrapper for one form control.

stableNo JS requiredhydrateless/field.css

An accessible layout wrapper for a single form control: a label, the control, optional help text, and a validation message, all wired together. CSS-only.

Field

Live

Email

We never share it.

Invalid state

Add data-hl-invalid to the field and render an .hl-error message.

Live

Email

Enter a valid email address.

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.
invalid	boolean	false	Apply the error styling to the field.

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	Error text and required marker color.
--hl-space-2	Gap between label, control, and message.

Accessibility

• In React, spreading useField() links the control to its label, help, and error via aria-describedby.
• Set aria-invalid="true" on the control when invalid so the error is announced.

Related

InputA text input styled with the hl-input primitive.TextareaA multi-line text input built on a native textarea.SelectA native select with a CSS-drawn caret.