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”.
A switch consists of the following elements:
- 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”.
- The icon is only visible in state “On”.
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.
This chapter shows several switch styles in the design system.
To fit the switch to your context, use a custom colored switch.
The following table gives reference to the different font sizes and weights:
|Label (all switch sizes)||all||Siemens Sans Roman||14px||16px||left|
Sizing and spacing
The following measurements show the dimensions for this component: