Form labels
The best way to provide an accessible name to form elements is to use the
label prop provided by EuiFormRow. However, certain types of form controls require extra care to ensure an accessible experience. Below are just a few examples.
Form controls that come with their own label donβt need the one provided by EuiFormRow. For controls like EuiSwitch, EuiButton, and EuiLink be sure to pass hasChildLabel={false} to the wrapping EuiFormRow.
Implicit titles for the first form control
When displaying the form control's name in some other way than through the visual label prop, the form control still needs to be associated with that element. To do this, either:
- duplicate the text and pass it as the
aria-labelof the form control, or - pass the
idof the text to the form control'saria-labelledby.
More complicated form labels
Some controls are just hard though and will often require some custom work. Refer to an individual componentβs documentation and remember to test with a screen reader!
Fieldset and legend
Use EuiFormFieldset for groups of related controls where the individual labels for each control do not provide a sufficient description and an additional group level description is needed accessible name.
EuiFormFieldset wraps its children in a <fieldset> with the option to add a <legend> via the legend object prop. While most commonly used for
Props
EuiFormLabel
Prop | Description and type | Default value |
|---|---|---|
Prop type# | Description and type Default type is a "label" | "legend" | Default value label |
Prop isFocused# | Description and type Type: boolean | Default value |
Prop isInvalid# | Description and type Type: boolean | Default value |
Prop isDisabled# | Description and type Changes boolean | Default value |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
EuiFormFieldset
Prop | Description and type | Default value |
|---|---|---|
Prop legend# | Description and type Adds an EuiFormLegend element as the first child EuiFormLegendProps | Default value |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Type: string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |