Do

• Use switches in a switch form cell only.
• Use switches to control the availability of related UI elements on the 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.

A. Text Label

The text label describes the object this switch is controlling.

B. Helper Text

The helper text provides additional information about the form cell.

C. Switch

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

D. Label

The label indicates the read-only state. The default labels "On" and "Off" can be replaced with different text combinations such as "Included/Not Included" or "Open/Closed".

Anatomy of switch form cell default state (top) and read-only state (bottom)

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.

Enabled switch form cells

When a switch is disabled, apply 50% opacity to the whole cell. Disabled cells are not interactive.

Disabled switch form cells

Use an error message only when necessary. For page level feedback, use a snackbar.

The error message should be concise. We recommend using one line of text for the error message.

By default, there is no error message. When the error 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

In read-only state, the layout stays the same as in other states, except that the M3 switch is replaced with text. Read-only state is only applied to SAP Fiori switch form cells and leaves the M3 switch unchanged.

Switch form cell read-only state on (top) and off (bottom)

Switch form cell on mobile (top) and on tablet (bottom)