Components
Field
A composable form-field primitive that pairs any control with a label, helper text, and validation messaging — with vertical, horizontal, and responsive layouts.
Basic usage
Wrap a control in Field and pair a FieldLabel with the input via matching htmlFor / id.
We'll never share your email with anyone.
Field groups
Use FieldGroup to stack several fields with consistent spacing.
Optional — appears on your invoices.
Validation
Add data-invalid to the field and render a FieldError to surface a destructive-colored message with role="alert".
Password must be at least 8 characters long.
Fieldsets & legends
Group related fields under a semantic FieldSet with a FieldLegend. Set orientation="horizontal" on a field to align its label and control in a row.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'vertical' | 'horizontal' | 'responsive' | 'vertical' | Stacks the label and control (vertical), aligns them in a row (horizontal), or switches from stacked to row at the @md container breakpoint (responsive). Applies to Field. |
data-invalid | boolean | — | When present on Field, switches the label, description, and error text to the destructive color. |
variant | 'legend' | 'label' | 'legend' | Sizing of FieldLegend — full base size for section titles, or compact label size when nested. |
errors | Array<{ message?: string }> | — | Convenience prop on FieldError — renders a single message inline, or a bulleted list when multiple errors are passed. Ignored when children are provided. |
className | string | — | Additional Tailwind classes merged onto the underlying element. |
...rest | HTMLAttributes | — | Native props are forwarded to the underlying element for each part. |
Accessibility
FieldLabelrenders a native<label>— match itshtmlForto the control'sidso clicking the label focuses the input and screen readers announce the name.Fieldappliesrole="group", semantically associating the label, control, and helper text as a single unit.FieldErrorcarriesrole="alert"so validation messages are announced when they appear; setaria-invalidon the control to mark it invalid.FieldSetrenders a native<fieldset>andFieldLegenda<legend>, giving grouped controls (radios, checkboxes) an accessible group label.