Switch
Last Updated on Sep 29, 2022
Switches are used to quickly switch between two states, popular for “on/off” use cases. The change needs to happen immediately.
Design Principles
When to use
- Label should be visible to the left or right of the switch
- When clicked, the change should occur immediately
- When used as a part of a complex layout, it should be aligned with other elements in the row
- If it’s a part of a form, it should follow the same rules as other inputs (alternative UI: a 2 option radio button)
When not to use
- Do not use switch for “agree terms”
- Do not use switch without its label
- Do not use a group of switches with the same title where the on/off state of each switch is not clear
- If the system doesn’t support both states of the toggle, another control should be used
- Do not use a single switch for “additional” behaviors, such as “advanced search”. Use only when showing immediate effect, aka users could see the results without clicking on another call-to-action like save / submit.
Related Components