Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsUtilitiesPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Overview
  • Layout
  • Containers
  • Navigation
  • Display
  • Forms
    • Form controls
    • Form layouts
    • Form validation
    • Text controls
    • Numeric controls
    • Selection controls
      • Component comparison
      • Basic select
      • Super select
      • Combo box
      • Selectable
      • Checkbox and Checkbox group
      • Radio and Radio group
      • Switch
    • Search and filter controls
    • Date and time controls
    • Other controls
  • Data grid
  • Tables
  • Templates
  • Editors and syntax
  • EUI
  • Forms
  • Selection controls
  • Switch

Switch

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.

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

Usage

Labels

The label should be static, action-oriented, and describe the feature. Avoid verbs that are less conversational such as "enable" unless they are your only option.

Malware protection

Do: Use a static noun describing the setting to turn on or off.

If enabled, uses malware protection

Don't: Start with statements such as "If true" or "If enabled".

Use recommended defaults
Rollover when an index is 30 days old or reaches 50 gigabytes.

Do: If relevant, start with a verb ("Use A", "Show B") and add help text to provide more info.

Enable

Don't: Use only a verb. Generic verbs alone make options unclear.

Use past tense only when labelling a list of previously created items, like in a table header.

𐘂𐘂
✄𐘗✄𐘗
Enabled
↦
↦
↵
↦
↦
↵
↦
↦
↵
𐘂𐘂

Do: In a list of already created items, use the past tense.

Log enabled

Don't: Change the label to represent the current state of the switch.

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
↵
𐘂𐘂
Edit this page

Previous
Radio and Radio group
Next
Search
  • Usage
    • Labels
  • Props
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic