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 MindSphere 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

Color

The following table gives reference to the different colors and shades used in the component:

Name State Property Color name
Switch off Background color Gray 400
Switch on Background color State blue 100 (default) or any other color
Switch element all Background color White
Switch element all Box shadow Black – 0 0 2px 0, rgba(0,0,0,0.50)

Typography

The following table gives reference to the different font sizes and weights used in the component:

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