Switches#
Switches can be used for controlling features, settings or hardware that have a clear on/off logic.
When to Use#
Switches are analogous to real-world controls, and this real-world correspondence can be used as a guide as to when a switch should be used.
On the whole, switches are preferred to check boxes, since they offer a larger click target, often fit modern UI layouts better, and are more action orientated. However, check boxes may still be used if a switch doesn’t seem appropriate.
Only use a switch to control options that have a clear binary nature. If the switch label cannot adequately communicate what both states of the control do, a radio button may be a better choice.
General Guidelines#
Label switches with nouns using header capitalization. For example, Automatic Location or Notifications.
Give the label an access key to allow users to focus the control using a keyboard.
Switch States#
The active/inactive state of a switch is communicated by its background color, and this can be changed independently of the actual switch position. This can be used to communicate when a service or feature has been switched on, but has not yet come online. This technique can be particularly useful when there’s a delay between the switch being toggled and it having an effect.
If a feature has been disabled or is unavailable, it is better to make the switch insensitive, since this avoids the suggestion that the service ought to respond to user action.