Form Inputs
Field
Field is a set of low level building blocks for composing accessible form controls with a label, a description and an error message.
Field is a set of low level building blocks for composing accessible form controls with a label,
a description and an error message. Use FieldControl to connect native Input and Textarea
elements to the field label, description, disabled state, and validation.
We will never share your address.
Error message#
FieldError renders with role="alert" so assistive technology announces the message.
That username is already taken.
Textarea#
Markdown is supported.
Horizontal orientation#
Use FieldContent to stack a title and description next to a control.
Get notified when someone mentions you.
Field group#
FieldGroup stacks multiple fields, and FieldSeparator divides them.
Fieldset#
Component props#
Field#
| Name | Type | Description |
|---|---|---|
| orientation | FieldOrientation | "vertical" | "horizontal" | "responsive" |
| name | string | Identifies the field when a form is submitted |
| disabled | boolean | Disables every control inside the field |
| invalid | boolean | Marks the field as invalid when validation is handled externally |
| validate | (value, formValues) => string | string[] | null | Custom validation function |
FieldLegend#
| Name | Type | Description |
|---|---|---|
| variant | 'legend' | 'label' | Controls the legend text size |
FieldError#
| Name | Type | Description |
|---|---|---|
| match | boolean | keyof ValidityState | When to show the message. Defaults to always when children are supplied |
FieldSeparator#
| Name | Type | Description |
|---|---|---|
| children | ReactNode | Optional label rendered on top of the separator line |