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.