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:

switch-usage-construction-state-on
State “On” – 1. Background, 2. Switch element, 3. Icon

switch-usage-construction-state-off
State “Off” – 1. Background, 2. Switch element

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.

switch-usage-types-label
Switch with label in different sizes

Do’s & Don’ts

switch-usage-do-label

  • A label next to the switch must describe the affected property.
  • Don’t use the label to describe the states of the switch.

switch-usage-dont-sizes

  • Use one switch size for the same usage context.
  • Don’t mix sizes without apparent reason.

switch-usage-dont-instant-effect

  • 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

switch-style-overview-standard
Switch in different sizes

switch-style-overview-with-label
Switch with label in different sizes

To fit the switch to your context, use a custom colored switch.

switch-style-overview-customized
Custom colored switch in different sizes

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 Regular 14px 16px left

Sizing and spacing

The following measurements show the dimensions for this component:

switch-stylesmall-sizing
Small switch

switch-style-medium-sizing
Medium switch

switch-style-large-sizing
Large switch

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top