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
|
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 roleswitch
. aria-label
set on the element with roleswitch
.
- Visible text content contained within the element with role
- When on, the switch element has state
aria-checked
set totrue
. When off, it has statearia-checked
set tofalse
. - 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
Date | Version | Notes | Contributors |
---|---|---|---|
11/23/2020 | 1.0.0 | Border color changed to be accessible. White background added for emphasis. | E. Bohn, L. Kause, N. Springer |
Was this page helpful?
Thanks for your feedback!