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.

Loading...

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.

Loading...

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!

Loading...

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.

Loading...

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 ↵

𐘂𐘂