Selection controls
EUI provides three types of selection controls: EuiCheckbox, EuiRadio and EuiSwitch. These controls allow users to select options among a list or switch settings on/off. They are ideal for a small list of options.
For longer lists of options, consider using a EuiSelect, EuiSuperSelect or EuiComboBox.
Checkbox
This component renders a basic HTML <input type="checkbox"> element. Use checkboxes to allow users to select multiple options from a list.
Use the checked prop to handle the checked and unchecked state. You can also use the indeterminate prop to set an indeterminate state. This state is commonly used in hierarchical checkboxes to indicate that only some of the checkbox's descendants are checked.
Make sure to pass a label to ensure a larger clickable area and ensure that screen readers will read out the label when the user is focused on the input. To learn more about labels usage, go to the guidelines tab.
Checkbox group
Use a EuiCheckboxGroup when you want to generate a group of checkboxes by passing an array of options with an id andlabel for each object. Use the idToSelectedMap to indicate the IDs of the selected items.
When the individual labels for each radio do not provide a sufficient description, pass a legend to the group.
Use the compressed prop to tighten up the spacing between checkbox rows.
Radio
This component renders a basic HTML <input type="radio"> element. Use radio buttons to allow users to choose one option out of a list. They are ideal for a list of more than 2 options, and usually no more than 6 options.
When creating a list, each input should have the same name to ensure a group is established. This way when you select a radio button in that group, the other options are automatically deselected.
Make sure to pass a label to ensure a larger clickable area and ensure that screen readers will read out the label when the user is focused on the input. To learn more about labels usage, go to the guidelines tab.
Radio group
Use a EuiRadioGroup when you want to generate a group of radio buttons by passing an array of options with an id andlabel for each object. Pass a single name property to define the group.
When the individual labels for each radio do not provide a sufficient description, pass a legend to the group.
Switch
A switch can be substituted for a checkbox when the semantics of the label dictate a true on/off state.
Make sure to pass a label to ensure a larger clickable area and ensure that screen readers will read out the label when the user is focused on the input. You can find more about labels usage in the guidelines tab.
If the switch is described in some other manner, like when using an EuiFormRow, you can eliminate the visible label with showLabel={false} or use it to further describe the state.
When providing the state as the label, you'll need to provide an aria-describedby with the label's id to associate it with the switch.
Fieldset and legend
"[Use a fieldset and legend] 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." WCAG Spec
EuiFormFieldset simply wraps its children in a <fieldset> with the option to add a <legend> via the legend object prop. Find more examples in the guidelines tab.
Props
EuiCheckbox
Prop | Description and type | Default value |
|---|---|---|
Prop id# | Description and type Type: string | Default value Required |
Prop onChange# | Description and type Type: ChangeEventHandler<HTMLInputElement> | Default value Required |
Prop checked# | Description and type Type: boolean | Default value false |
Prop inputRef# | Description and type Type: (element: HTMLInputElement) => void | Default value |
Prop label# | Description and type Type: ReactNode | Default value |
Prop disabled# | Description and type Type: boolean | Default value false |
Prop indeterminate# | Description and type Type: boolean | Default value false |
Prop labelProps# | Description and type Object of props passed to the CommonProps & LabelHTMLAttributes<HTMLLabelElement> | 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 |
EuiCheckboxGroup
Prop | Description and type | Default value |
|---|---|---|
Prop onChange# | Description and type Type: (optionId: string) => void | Default value Required |
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 |
Prop options# | Description and type Type: EuiCheckboxGroupOption[] | Default value [] |
Prop idToSelectedMap# | Description and type Type: EuiCheckboxGroupIdToSelectedMap | Default value {} |
Prop compressed# | Description and type Tightens up the spacing between checkbox rows boolean | Default value |
Prop disabled# | Description and type Passed down to all child boolean | Default value |
Prop legend# | Description and type Adds an EuiFormLegend element as the first child HTMLAttributes<HTMLLegendElement> & CommonProps & { children: ReactNode; display?: "hidden" | "visible"; compressed?: boolean; } | Default value |
EuiRadio
Prop | Description and type | Default value |
|---|---|---|
Prop onChange# | Description and type Type: ChangeEventHandler<HTMLInputElement> | Default value Required |
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 |
Prop label# | Description and type Type: ReactNode | Default value |
Prop id# | Description and type Type: string | Default value |
Prop name# | Description and type Type: string | Default value |
Prop value# | Description and type Type: string | Default value |
Prop checked# | Description and type Type: boolean | Default value |
Prop disabled# | Description and type Type: boolean | Default value |
Prop labelProps# | Description and type Object of props passed to the CommonProps & LabelHTMLAttributes<HTMLLabelElement> | Default value |
EuiRadioGroup
Prop | Description and type | Default value |
|---|---|---|
Prop onChange# | Description and type Type: EuiRadioGroupChangeCallback | Default value Required |
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 |
Prop disabled# | Description and type Passed down to all child boolean | Default value |
Prop compressed# | Description and type Tightens up the spacing between radio rows boolean | Default value |
Prop name# | Description and type Type: string | Default value |
Prop options# | Description and type Type: EuiRadioGroupOption[] | Default value [] |
Prop idSelected# | Description and type Type: string | Default value |
Prop legend# | Description and type Adds an EuiFormLegend element as the first child HTMLAttributes<HTMLLegendElement> & CommonProps & { children: ReactNode; display?: "hidden" | "visible"; compressed?: boolean; } | Default value |
EuiSwitch
Prop | Description and type | Default value |
|---|---|---|
Prop label# | Description and type Must be a string if ReactNode | Default value Required |
Prop checked# | Description and type Type: boolean | Default value Required |
Prop onChange# | Description and type Type: (event: React.BaseSyntheticEvent<React.MouseEvent<HTMLButtonElement>, HTMLButtonElement, EventTarget & { checked: boolean; }>) => void | Default value Required |
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 |
Prop showLabel# | Description and type Whether to render the text label boolean | Default value true |
Prop disabled# | Description and type Type: boolean | Default value |
Prop compressed# | Description and type Compressed switches are smaller and contain no icon signifiers boolean | Default value |
Prop labelProps# | Description and type Object of props passed to the label's CommonProps & HTMLAttributes<HTMLSpanElement> | Default value |
Prop mini# | Description and type Mini styling is similar to compressed, but even smaller. boolean | 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 |