Fields

Usage and anatomy

Field combines a label, form control, description, and validation message into a consistent accessible layout. Use <FieldLabel /> with a matching control ID and render <FieldError /> when validation fails.

import { Field, FieldDescription, FieldError, FieldLabel } from "@acme/ui/field"
import { Input } from "@acme/ui/input"

<Field data-invalid={hasError}>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" type="email" aria-invalid={hasError} />
  <FieldDescription>We will only use this for account updates.</FieldDescription>
  {hasError && <FieldError>Enter a valid email address.</FieldError>}
</Field>

• Apply data-invalid to Field and aria-invalid to the interactive control.
• Use FieldGroup for related fields and FieldSet with FieldLegend for semantic groups.
• Field is form-library agnostic and can be composed with native state, React Hook Form, or another validation solution.

API reference

Field core props

Field, FieldContent, FieldGroup, and FieldTitle accept native div props. FieldLabel accepts Label props, FieldSet accepts native fieldset props, FieldLegend accepts native legend props, and FieldDescription accepts native paragraph props.