Toggle Switch

Toggle switches are digital on/off switches and should only be used when the user needs to decide between two opposing states.

 

Toggle switches should take immediate effect and should not require the user to click Save or Submit to apply the new state. Keep labels short and direct. The label should describe what the control does when the switch is on.

The toggle-switch labels used in the Google Calendar app shown above are direct and unambiguous; they describe the state of the system when the switch is on and make sense with the ‘on/off’ appendage.

In the example above, is this toggle on or off? A state descriptor (the word Off) is used to identify the current state of the toggle (off). Unfortunately, this descriptor is ambiguous because the word Off appears on the right of the switch and the toggle dot is on the left, users can also interpret the state of the toggle as on (that is, away from the label Off).