Switch

A switch is any control which presents two mutually exclusive options or states. Switches are also used to select items within lists. See the Coding guide for details on implementing switches in your apps.

Characteristics

  • A switch presents two mutually exclusive choices or states.
  • There are three types of switch:
    • On/Off toggle switches
    • Checkboxes
    • Radio buttons

Visuals

Below are the various available states of the different styles of switches.

  Checkbox Radio button Toggle
  Normal Danger Normal Danger
Off
On

There are also function buttons. These are buttons in a toolbar that are used to toggle features on and off. For example:

Off On

Placement

Depending on the context in which a switch is used, you will position it differently.

Edit switches

Edit switches, such as these switches being used to let the user choose multiple messages to delete, are placed to the left of the content to which they refer while in edit mode.

All other switches

All other switches, including checkboxes and on/off switches, are always placed to the right of their labels or context.

See also

Document Tags and Contributors

 Contributors to this page: chrisdavidmills, Sheppy
 Last updated by: chrisdavidmills,