Form field

Input — with hint

<Field label="Work email" hint="..." required>
  <Input type="email" />
</Field>

Input — with error

<Field label="Tenant slug" error="Already taken.">
  <Input aria-invalid defaultValue="acme" />
</Field>

Textarea

<Field label="Incident description" hint="...">
  <Textarea rows={5} />
</Field>

Select

<Field label="Region" required>
  <Select>...</Select>
</Field>

Composed form

<form>
  <Field><Input /></Field>
  <Field><Select>...</Select></Field>
  <Button>Create tenant</Button>
</form>

How FormField works with assistive tech

Role

• label (wraps native control)

Keyboard

• native (delegated to wrapped control)

ARIA attributes

• aria-required
• aria-describedby (hint/error)

Focus behavior

• delegated to wrapped control

Field is a layout/label primitive. Pair with Input, Textarea, or Select children. Label associated via wrapping <label>. Error messages must be linked via aria-describedby on the child control.