Checkboxes and radios
Checkboxes and radios are are ideal for allowing users to select options among a small list of options, or to
switch settings on/off. For longer lists of options, consider using dropdown selection components.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.
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 |