Switch provides "on" and "off" choices and can be useful for opt-in and additive actions.
Overview
Switches should be used for boolean and "on" and "off" choices. They should not be for binary choices such as "1 or 2", "blue or red", "sky or ground", "miles or kilometers", "large or small", etc.
For "yes" and "no" interactions, multiple selections, and interactions where a choice is optional, please consider Checkbox.
For single choice interactions, please consider Radio Button or Segmented Control.
Usage
- Dark mode switch
- Layer visibility
Sample
Best practices
Below are important guidelines on using the Switch component.
Accessibility
Switch should include a label property value, or be accompanied by a Label, which provides context of the intent to support assistive technologies.
Keyboard navigation
| Key | Function |
|---|---|
Tab | Moves focus in or out of component. |
Tab and Shift | Move focus in or out of component. |
Enter | Toggles the component. |
Space | Toggles the component. |
Writing and copy
Keep labels for Switches succinct. Do not use contractions such as "you're", "aren't", "can't", and "haven't" for Switch labels in order to reduce confusion. Avoid writing Switch text as a question.
A label for a Switch should be supporting "On" as additive, not subtractive. For example:
- Show layer
- Enable editing
- Allow credit usage
- Display controls
- Update automatically