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.

Component Variants

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.