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.