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.


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


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

  Checkbox Radio button Toggle
  Normal Danger Normal Danger

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

Off On


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


File Size Date Attached by
switch: settings
50956 bytes 2013-02-24 11:49:27 Sheppy
switch: list
66096 bytes 2013-02-24 11:51:33 Sheppy
switch: checkbox - off
1526 bytes 2013-02-24 13:38:17 Sheppy
switch: checkbox - on (danger)
1498 bytes 2013-02-24 13:38:27 Sheppy
switch: checkbox - on
1478 bytes 2013-02-24 13:38:36 Sheppy
switch: radio - off
1526 bytes 2013-02-24 13:38:46 Sheppy
switch: radio - on (danger)
1494 bytes 2013-02-24 13:40:23 Sheppy
switch: radio - on
1670 bytes 2013-02-24 13:40:31 Sheppy
switch: tick - off
1746 bytes 2013-02-24 13:40:40 Sheppy
switch: tick - on
2167 bytes 2013-02-24 13:40:47 Sheppy
switch: checkbox - off (danger)
1385 bytes 2013-02-24 13:42:51 Sheppy
function buttons - off
21722 bytes 2013-02-24 13:50:12 Sheppy
function buttons - on
22222 bytes 2013-02-24 13:50:19 Sheppy

Document Tags and Contributors

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