Switches

Switches are used to toggle functionality.

Overview

Switches are selection controls that yield instantaneous actions. They have an on and off setting.

Usage

Use when

  • Turning on and off a feature, mode, or functionality.
  • Toggling elicits an immediate change in the UI.
  • Toggling elicits a change in background behavior without affecting the UI.
  • You want to trigger a state change directly when you toggle it.
Example
Settings
  • WiFi
  • Bluetooth
  • Notifications
  • Dark Mode
Switches work well as toggles for functionality, as in this settings panel example.

Don’t use when

  • Requiring user action consent, such as accepting terms and conditions. Instead, use a Checkbox.
  • Requesting multiple choices from a group of options. Instead, use a Checkbox group.
  • Users need to select one item from a list of options. Instead, use a Radio Button.
Your Allergies (click all that apply)
Don't use switches for multi-selections within forms. These are best served by Checkboxes instead.

Specifications

  • A switch must have a visible label that clearly conveys what option a user will turn on or off.

Behaviors

  • Avoid changing the label text based on on and off state.
Do use the same label text for both the on and off state. Don't change label text between states.

Editorial

  • Avoid acronyms.
  • Use 2-5 words.
  • Use the same label text for on and off states

Accessibility

  • The switch has role switch.
  • The switch has an accessible label provided by one of the following:
    • Visible text content contained within the element with role switch.
    • A visible label referenced by the value of aria-labelledby set on the element with role switch.
    • aria-label set on the element with role switch.
  • When on, the switch element has state aria-checked set to true. When off, it has state aria-checked set to false.
  • When the switch is in focus, pressing the “Space” key changes the state of the switch.
  • Use a fieldset to create a switch group.
What's Changed
DateVersionNotesContributors
11/23/20201.0.0Border color changed to be accessible. White background added for emphasis.E. Bohn, L. Kause, N. Springer