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
- Example: Using a switch to toggle between Weekly or Monthly subscriptions
- 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
- Example: Using a switch label like “Call blocking disabled” makes the on/off state difficult to discern
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