Field

A composable form field system that links labels, hints, and error messages to inputs through shared context. Handles accessibility attributes automatically.

Basic Field

Display name

This is how others will see you.

<Field>
  <FieldLabel>Display name</FieldLabel>
  <Input placeholder="Enter your display name" />
  <FieldHint>This is how others will see you.</FieldHint>
</Field>

Error State

Email address

Please enter a valid email address.

<Field error={true}>
  <FieldLabel>Email address</FieldLabel>
  <Input type="email" placeholder="you@example.com" />
  <FieldError>Please enter a valid email address.</FieldError>
</Field>

Complete Example

<form className="space-y-6">
  <Field>
    <FieldLabel>Full name</FieldLabel>
    <Input placeholder="Jane Doe" />
    <FieldHint>Your legal first and last name.</FieldHint>
  </Field>

  <Field>
    <FieldLabel>Email</FieldLabel>
    <Input type="email" placeholder="jane@example.com" />
    <FieldHint>We use this for account recovery.</FieldHint>
  </Field>

  <Field error={true}>
    <FieldLabel>Password</FieldLabel>
    <Input type="password" placeholder="Create a password" />
    <FieldError>Password must be at least 8 characters.</FieldError>
  </Field>
</form>

API Reference

Field

Prop	Type	Default	Description
`error`	`boolean`	`false`	When true, applies error styling to child inputs and labels. Adds red border to inputs and red text to labels.
`id`	`string`	`auto-generated`	Explicit ID for the field. When omitted, a unique ID is generated automatically via React.useId().
`className`	`string`	—	Additional CSS classes to apply to the field wrapper.

FieldLabel

Prop	Type	Default	Description
`children` required	`React.ReactNode`	—	The label text content.
`className`	`string`	—	Additional CSS classes to apply to the label element.

FieldHint

Prop	Type	Default	Description
`children` required	`React.ReactNode`	—	Helper text displayed below the input.
`className`	`string`	—	Additional CSS classes to apply to the hint paragraph.

FieldError

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	The error message. When empty or undefined, the element does not render at all.
`className`	`string`	—	Additional CSS classes to apply to the error paragraph.

Accessibility

Field automatically links FieldLabel to the input via htmlFor, and connects FieldHint and FieldError via aria-describedby, so screen reader users hear the label, the hint, and any validation error as a single unit.

FieldError uses role="alert" so screen readers announce validation errors the moment they appear, without the user needing to navigate back to the field.

Always include a FieldLabel. Placeholder text is not a substitute for a label — it disappears when users start typing and is often low-contrast.