Field
A labelled wrapper for a single form control. Renders the label (with an
optional required marker), the control (its children — usually a
TextField or Select), and a
hint or error line below.
Label & hint
/
Lowercase letters, numbers and hyphens.Error
When error is set it replaces the hint and renders in the danger tone. Pair it
with the control's own invalid flag for the red border.
At least 3 characters.
Props
| Prop | Type | Description |
|---|---|---|
label | ReactNode | Field label (rendered above the control). |
hint | ReactNode | Helper text shown below when there is no error. |
error | ReactNode | Error message; replaces the hint, shown in danger tone. |
required | boolean | Appends a danger * to the label. |
htmlFor | string | Associates the label with a control id. |
className | string | Extra classes on the wrapper. |
children | ReactNode | The control to wrap. |