Switch

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Style
  2. Theme
  3. Configuration
  4. Space
  5. States
  1. Style
  2. Theme
  3. Configuration
  4. Space
  5. States

Style

A Switch resembles a slider and includes a status message. When activated, the track background changes color and the handle changes position. If a user needs to toggle multiple Switches, they can be stacked on top of each other.

Anatomy

with numbers labeling the track, handle, and status message
  1. Track
  2. Handle
  3. Status message

Theme

A Switch is available in both light and dark themes.

Light theme switch with blue track, white handle, and black text Dark theme switch with light blue track, black handle, and white text

Configuration

A Switch is the same height as the status message and both are horizontally aligned as well.

Switch and status message are 24px tall. Switch is 40px wide. Horizontally aligned switch and status message

Status messages

A status message can be positioned to the right or left of a Switch.

One switch with status message on the left and another with status message on the right

Space

Space values remain the same at all viewport sizes.

16px spacer between the switch and status message 24px spacer between stacked switches with status messages

States

A Switch and the status message cx count as the same selectable object.

The visual appearance of a Switch does not change unless toggled.
Switches that are on, off, disabled, hovered, active, and in focus
  1. On
  2. On with check
  3. Off
  4. Disabled
  5. Hover
  6. Focus
  7. Active
Edit this page on GitHub