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-label of the form control, or
pass the id of the text to the form control's aria-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 checkboxes and radios, it can also be used to group related inputs and selects under a shared label.

Props

EuiFormLabel

Extends HTMLAttributes


Prop	Description and type	Default value
Prop type#	Description and type Default type is a `label` but can be changed to a `legend` if using inside a `fieldset`. Type: `"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 `cursor` to `default`. Type: `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. @see aria-labelledby. 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

EuiFormFieldset

Extends HTMLAttributes


Prop	Description and type	Default value
Prop legend#	Description and type Adds an EuiFormLegend element as the first child Type: `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