Intro

These visual specifications should serve as a guideline for Front-End Developers on how implement this control.

Single Switch

Spacing specification diagram of a single switch, with markers A, B, and C indicating the toggle width, gap between toggle and label, and row height respectively.

Value Description Details
A Switch UI5 Switch
L/R Padding (touch area): 0.5rem
B Padding Padding between switch and text: 0.5rem
C Text UI5 Text

Switch Group with Label (Vertical)

Spacing specification diagram of a vertically-stacked switch group with a label, with markers A pointing to the group label, B indicating the group width, and C indicating the row height.

Value Description Details
A Label UI5 Label
B Padding Padding between label and switch group: 0.125rem
C Switch Group See Single Switch specifications
Padding between switches: 0

Switch Group with Label (Horizontal)

Spacing specification diagram of a horizontally-labeled switch group, with markers A, B, and C indicating the label width, gap between label and switches, and row height respectively.

Value Description Details
A Label UI5 Label
B Padding Padding between label and switch group: 0.5rem
C Switch Group See Single Switch specifications
Padding between switches: 0

Switch Group with Title

Spacing specification diagram of a switch group with a bold title, with markers A pointing to the title, B indicating the group width, and C indicating the row height.

Value Description Details
A Title UI5 Title
Font size: --sapFontHeader6Size
B Padding Padding between label and switch group: 0.5rem
C Switch Group See Single Switch specifications
Padding between switches: 0