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

• native

Keyboard

• native form controls

ARIA attributes

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

Focus behavior

• visible-3px

Label must be associated via htmlFor/id. Error messages linked via aria-describedby. Required fields use aria-required (not only required attr).