Switch
A switch allows the user to pick between two opposite states.
Usage
When to use
Use a switch when there is a binary state that the user should be able to toggle instantly. Examples are “On”/”Off”, “Online”/”Offline” or “Installed”/”Not installed”.
General construction
A switch consists of the following elements:
1. Background
- Its appearance depends on the current state of the switch.
2. Switch element
- Shown on the right side for state “On”.
- Shown on the left side for state “Off”.
3. Icon
- The icon is only visible in state “On”.
Options
There are the following switch options:
Switch with label
Labels provide more explanation if necessary.
Do’s & Don’ts
- A label next to the switch must describe the affected property.
- Don’t use the label to describe the states of the switch.
- Use one switch size for the same usage context.
- Don’t mix sizes without apparent reason.
- Switches immediately trigger an effect when being clicked.
- A switch never needs an extra button to submit the selected state.
Style
This chapter shows several switch styles in the design system.
Overview
To fit the switch to your context, use a custom colored switch.
Typography
The following table gives reference to the different font sizes and weights:
Name | State | Font-family | Font-size | Line-height | Text-align |
---|---|---|---|---|---|
Label (all switch sizes) | all | Siemens Sans Roman | 14px | 16px | left |
Sizing and spacing
The following measurements show the dimensions for this component: