Skip to main content

Switch

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

Code documentation

Web

Anatomy

The switch component is made up of four elements.

Anatomy diagram numbering four elements of a switch.
  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 no label.

Helper text

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

A switch includes sample helper text immediately below the label. Both are positioned to the right of the switch.

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.

The switch's label and helper text each wrap to multiple lines when they meet the edge of an implied container around the switch.

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
The unselected switch includes enabled, focus, hover, active, and disabled states.
Unselected
The selected switch includes enabled, focus, hover, active, and disabled states.
Selected