Switches are used to toggle functionality.


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


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


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


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


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


  • 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
11/23/20201.0.0Border color changed to be accessible. White background added for emphasis.E. Bohn, L. Kause, N. Springer