Checkbox and Checkbox group

Checkboxes 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.

Loading...

Checkbox group

Use a EuiCheckboxGroup when you want to generate a group of checkboxes by passing an array of options with an id and label for each object. Use the idToSelectedMap to indicate the IDs of the selected items. For more details on which selection component to use, see the Component comparison.

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.

Loading...

Usage

Labels

A label should be succinct, short, and descriptive with one to two words. This way users can quickly scan the available options.

Canceled

In progress

On hold

Resolved

Do: Use one to two descriptive words.

Case is canceled

Case is in progress

Case is on hold

Case is resolved

Don't: Repeat the same words. They make labels difficult to scan.

Use positive and active wording.

Use logs

Use metrics

Do: Tell users what happens when the selection control is on.

Do not include logs

Do not include metrics

Don't: Use negatives. They're unnatural and confusing.

Use sentence case (capitalize the first word).

Read access

Write access

Create access

Delete access

Do: Sentence case makes titles easier to read.

Read Access

Write Access

Create Access

Delete Access

Don't: Title case can feel more cluttered.

Use consistent label structures for options within the same group.

Data to ship

Logs

Metric

Do: Use sentences only or fragments only.

Data to ship

Use Logs

Metric

Don't: Mix label structure within the same group of options.

Availability zones

1 zone

2 zones

3 zones

Do: Start all with a verb, all with a noun, or all with a number.

Availability zones

One zone

2 zones.

3 zones

Don't: Use ending punctuation. Exception: Question marks can be used if they add clarity.

Legends

For groups of options, add a legend that gives meaning to the options. Legends appear like a title.

Data to ship

Logs

Metrics

Do: Use nouns that describe the choices to make.

Data to ship

Logs

Metrics

Don't: Repeat choices or use the title as instructions.

Props

EuiCheckbox

Extends InputHTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

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: Ref<HTMLInputElement> | ((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 label element Type: 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

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

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. @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 ↵
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 Type: boolean ↦	Default value ↵
Prop disabled# ↦	Description and type Passed down to all child EuiCheckboxes Type: boolean ↦	Default value ↵
Prop legend# ↦	Description and type Adds an EuiFormLegend element as the first child If the individual labels for each radio do not provide a sufficient description, add a legend. Wraps the group in a EuiFormFieldset which adds an EuiLegend for titling the whole group. Accepts an EuiFormLegendProps shape. Type: HTMLAttributes<HTMLLegendElement> & CommonProps & { children: ReactNode; display?: "hidden" | "visible"; compressed?: boolean; } ↦	Default value ↵

𐘂𐘂