Field
Each example below is a real component instance — flip the theme toggle to see how it adapts.
With Label#
Loading…
With Hint#
Loading…
With Error#
Loading…
Required#
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | — | Visible label rendered above the control. |
| hint | ReactNode | — | Helper text shown below the control when no error is present. |
| error | ReactNode | — | Error message shown below the control. Displaces `hint` when set. |
| required | boolean | undefined | — | Marks the field with a visual asterisk (does not enforce validity). |
| children * | (props: { id: string; 'aria-describedby': string | undefined; 'aria-invalid': boolean | undefined; }) => ReactNode | — | The control. Receives `id`, `aria-describedby`, and `aria-invalid` automatically. Pass via render prop so the field can wire IDs without consumers thinking about it. |