Intro

The switch control mimics a physical switch that allows users to turn individual settings (such as personalization or display settings) “on” or “off”. When users change a switch to “on”, they expect an instantaneous action as soon as the switch changes state.

Usage

Do
  • Use switches in a switch form cell only.
  • Use switches to control the availability of related UI elements on current screen.
Don't
  • Don’t use switches for selecting states other than on and off.
  • Don’t use switches without a form cell container.

Anatomy

A. Text Label

The text label describes the object this switch is controlling.

B. Switch

The switch control is located on the right side of the cell.

Anatomy of switch form cell
Anatomy of switch form cell

Behavior and Interaction

Each switch form cell is one touch target. To change the state of a switch, the user can tap anywhere within the cell to toggle. When a switch is disabled, apply 50% opacity to the whole cell. Disabled cells are not interactive.

Enabled switch form cells
Enabled switch form cells
Disabled switch form cells
Disabled switch form cells

Validation Message

Use validation message only when necessary: to show error message or direct feedback of this control. Do not distract users with unimportant information. For page level feedback, use a snackbar instead.

The validation message should be concise. One line of text is recommended for the validation message.

By default, there is no validation message. When the validation message is triggered, insert the message with padding below the label text (before the divider line if used). The content under it will be pushed down.

Switch form cell with error message
Switch form cell with error message

Specifications

Padding and Alignment

Switch form cell is responsive to screen size. The horizontal padding follows the keylines of the device.

Mobile

Switch form cell on mobile
Switch form cell on mobile
Switch form cell with validation message on mobile
Switch form cell with validation message on mobile
Switch form cell on mobile - specifications
Switch form cell on mobile - specifications
Switch form cell with validation message on mobile - specifications
Switch form cell with validation message on mobile - specifications


Tablet

Switch form cell on tablet
Switch form cell on tablet
Switch form cell on tablet - specifications
Switch form cell on tablet - specifications
Switch form cell with validation message on tablet
Switch form cell with validation message on tablet
Switch form cell with validation message on tablet - specifications
Switch form cell with validation message on tablet - specifications

Resources

Development: Switch Form Cell

SAP Fiori for iOS: Switches

Material Design: Switches