States & name

  • A toggle switch has two mutually exclusive states — on/off
  • Do not use a switch to toggle between other states/values
    • Example: Using a switch to toggle between Weekly or Monthly subscriptions
      • Instead use radio buttons or a segmented control
  • Do not put names or values in the label that can confuse the state of the switch
    • Example: Using a switch label like “Call blocking disabled” makes the on/off state difficult to discern
      • If “Call blocking disabled” is on, is call blocking disabled?
      • If “Call blocking disabled” is off, is it enabled?
      • Instead, label the toggle switch “Call blocking” which can be clearly on/off

Do not use for

  • Do not use for contextual/localized options for which a picker or button would be more appropriate
    • Ex: “Shipping address matches payment address” is not a broad setting
  • Outside of a list, use a button that behaves like a toggle, not a switch.
  • Do not use for two mutually exclusive opposing named options
    • Ex: “List view or Map view”

Do use for

  • A toggle switch should be used for broad application/system settings
    • Ex: “Dark mode” is a broad setting affecting an entire application; toggle switch is appropriate

Material guidance

Related switch entries