Switches

An EuiSwitch can be substituted for an EuiCheckbox when the semantics of the label dictate a true on/off state.

Loading...

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.

Accessibility requirement

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.

Loading...

Props

EuiSwitch

Extends ButtonHTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop label# ↦	Description and type Must be a string if showLabel prop is false Type: 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. @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 showLabel# ↦	Description and type Whether to render the text label Type: 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 Type: boolean ↦	Default value ↵
Prop labelProps# ↦	Description and type Object of props passed to the label's <span /> Type: CommonProps & HTMLAttributes<HTMLSpanElement> ↦	Default value ↵
Prop mini# ↦	Description and type Mini styling is similar to compressed, but even smaller. It's undocumented because it has very specific uses. Type: boolean ↦	Default value ↵

𐘂𐘂