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. |
