Forms
Field
A labelled wrapper that lays out the label, control and a hint or error message, wired for accessibility so the message is announced with the input.
Purpose
Field is the standard way to build a form row. It owns the label, the required marker and the
hint or error text, and wires aria-describedby so the message is announced with the control
rather than orphaned beside it.
Example
We will send claim updates to this address.
This policy number was not recognised.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | React.ReactNode | — | Label text rendered above the control. |
htmlFor | string | undefined | — | `id` of the wrapped control; links the label and derives the hint/error `id`s. |
required | boolean | undefined | false | Appends a required marker (a destructive-coloured asterisk) to the label. |
hint | React.ReactNode | — | Helper text shown under the control; hidden while `error` is present. |
error | React.ReactNode | — | Error message; when set, it replaces the hint and the field renders in its error state. |
className | string | undefined | — | Extra classes for the field wrapper. |
childrenrequired | React.ReactNode | — | The form control (and any adornments) the field wraps. |