Updated: June 10, 2019

Switches

Intro

The switch control is used to toggle two mutually exclusive states, on and off.

Switches are used to control the availability of related UI elements on the current screen and must always be used in a table cell.

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

Behavior & Interaction

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

Resources