Input & Field
A text input, and the label/hint/error wrapper that makes it usable by everyone.
Field does the accessibility work
The label is a real <label htmlFor>, and the hint or error is wired to the control with aria-describedby — so a screen reader announces the problem when focus lands, rather than the user discovering it on submit.
Branch or tag to deploy.
No such branch on origin.
States
Guidance
Use it when
- Always inside a Field. A bare input with placeholder-as-label loses its label the moment someone types.
- Errors phrased as what to do, not what went wrong.
Reach for something else when
- Placeholder text as the label. It disappears exactly when the user needs to check what they are filling in.
- Colour as the only error signal — Field pairs it with text for that reason.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Field: the visible label, bound with htmlFor. |
| htmlFor | string | — | Field: the id given to the child control. |
| hint | string | — | Field: help text, shown when there is no error. |
| error | string | — | Field: replaces the hint and sets aria-invalid. |