Switch

A switch allows users to select between one of two opposing states or options.

Anatomy

The switch component is made up of four elements.

  1. Thumb
  2. Track
  3. Helper text
  4. Label

Variants

Label

Labels are not required if an adjacent label is included that adequately describes the purpose of the switch and is correctly referenced to the field for accessibility purposes.

A switch with a hidden label

Helper text

Helper text can be included alongside the label to provide additional context or guidance for using the control.

A switch with helper text included

Behavior

Text overflow

When labels wrap to multiple lines, the first line of the text remains vertically centered with the control. Helper text simply wraps to the next line.

An example of a long label and helper text wrapping to a second line

States

Switches can be either unselected or selected. Each of those statuses has five states:

  1. Enabled
  2. Focus
  3. Hover
  4. Active
  5. Disabled
Unselected
The unselected switch includes enabled, focus, hover, active, disabled, and pending states.
Selected
The selected switch includes enabled, focus, hover, active, disabled, and pending states.

Component tokens

The following component tokens are available for customizing the switch component.

Sample references including the swatch and computed values currently represent the applied light theme.

The token lists can be copied into tabular format for pasting into spreadsheets or other applications. Use these to help you document product-specific customizations or perform fine-grained filters.

Color

Opacity

Shadow