Updated: July 20, 2017

Switches

Intro

The switch control is used to toggle two mutually exclusive states, On and Off.

Usage

Do’s

  • Use switches in a table cell only.
  • Use a switch to control the availability of related UI elements on current screen.

Don’ts

  • Don’t use switches for selecting states other than on and off.
  • Don’t use switches without a table cell container.

Types

Switch without further selection

The label in the cell to describe what the toggle is for. When the switch button is enabled, the value is selected as On.

Switch further selection

Avoid adding text to describe the value of a switch. If the value requires further definition, use another row of cell for selection. The control can be a date/value picker or a value list to drill down for selection.

Don't
Do

Behavior & Interaction

To change the state of a switch, user taps on the switch button to toggle.

Style

When branding color is applied to your app, adjust a switch’s appearance to match the style of your app.