Components / Field

Field

The layout family for every form: consistent label, description, and error placement around any control. FieldSet and FieldGroup space whole sections; Field spaces one control.

import { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSet, FieldContent, FieldTitle, FieldSeparator } from '@layers/ui/field'

Rendered stock

House rules

• Forms are bare <form> elements with zero custom Tailwind. FieldSet owns section spacing (gap-6), Field owns label-to-control spacing; never space-y-* or ad-hoc grids around fields.
• FieldError takes the errors array from react-hook-form field state and renders nothing when it is empty. Pair it with aria-invalid on the control and data-invalid on the Field.
• orientation="horizontal" puts the control beside the label (switches, checkboxes); "responsive" switches to horizontal at the @md container width.
• If you are reaching for Tailwind to lay out a form field, the answer is a Field sub-component, not utility classes.

See also

• Form (react-hook-form bindings)