Field
stableclient
A labelled text input with its hint and error wired up. Label, control and message are one component so they cannot drift apart.
Hint and error
The error replaces the hint rather than stacking below it, and the border thickens to 3px — colour alone can't carry a state.
Four to seven characters.
Berth H-14 is occupied until 18:00.
<Field
label="Call sign"
placeholder="e.g. WDE4411"
hint="Four to seven characters."
/>
<Field
label="Berth"
defaultValue="H-14"
error="Berth H-14 is occupied until 18:00."
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label* | ReactNode | — | Visible label. Always rendered. |
| hint | ReactNode | — | Helper text below the control. |
| error | ReactNode | — | Replaces the hint, sets aria-invalid, and thickens the border. |
| required | boolean | — | Marks the field and sets the attribute. |
Guidance
Do
- Say what good input looks like before they get it wrong — a hint beats an error.
- Write errors that say how to fix it, not just that it broke.
Don't
- Don't use placeholder text as the label; it disappears the moment they type.
Accessibility
Label is bound with htmlFor and a generated id, so clicking it focuses the control.
aria-describedby points at the message whether it's a hint or an error, so screen readers get both.
aria-invalid is set only when `error` is present.