End of Life

User Experience Toolkit for Insights Hub and Industrial IoT (UXT) is migrated with Siemens Industrial Experience (iX) and will be shut down by September 30, 2025.

Migrate to Siemens Industrial Experience

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 User Experience Toolkit.

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:

NameStateFont-familyFont-sizeLine-heightText-align
Label (all switch sizes)allSiemens Sans Roman14px16pxleft

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

To see a detailed explanation of all existing classes, please refer to the usage table below.

Switch

<div class="inputGroup">
    <div class="switch switch--small">
        <input class="switch__checkbox" type="checkbox" id="input-switch01">
        <label class="switch__handle" for="input-switch01"></label>
    </div>
</div>

<div class="inputGroup">
    <div class="switch">
        <input class="switch__checkbox" type="checkbox" id="input-switch02">
        <label class="switch__handle" for="input-switch02"></label>
    </div>
</div>

<div class="inputGroup">
    <div class="switch switch--large">
        <input class="switch__checkbox" type="checkbox" id="input-switch03">
        <label class="switch__handle" for="input-switch03"></label>
    </div>
</div>

<div class="inputGroup">
    <div class="switch switch--small">
        <input class="switch__checkbox" type="checkbox" id="input-switch04" checked="checked">
        <label class="switch__handle" for="input-switch04">
            <span class="switch__icon"></span>
        </label>
        <label class="switch__label" for="input-switch04">Label and icon are optional<label class="switch__description" for="input-switch04">Description is optional</label></label>
    </div>
</div>

<div class="inputGroup">
    <div class="switch">
        <input class="switch__checkbox" type="checkbox" id="input-switch05" checked="checked">
        <label class="switch__handle" for="input-switch05">
            <span class="switch__icon"></span>
        </label>
        <label class="switch__label" for="input-switch05">Label and icon are optional<label class="switch__description" for="input-switch05">Description is optional</label></label>
    </div>
</div>

<div class="inputGroup">
    <div class="switch switch--large">
        <input class="switch__checkbox" type="checkbox" id="input-switch06" checked="checked">
        <label class="switch__handle" for="input-switch06">
            <span class="switch__icon"></span>
        </label>
        <label class="switch__label" for="input-switch06">Label and icon are optional<label class="switch__description" for="input-switch06">Description is optional</label></label>
    </div>
</div>

<div class="inputGroup">
    <div class="switch switch--small">
        <input class="switch__checkbox" type="checkbox" id="input-switch07" disabled="disabled">
        <label class="switch__handle" for="input-switch07"></label>
        <label class="switch__label" for="input-switch07">Disabled state unchecked</label>
    </div>
</div>

<div class="inputGroup">
    <div class="switch switch--small">
        <input class="switch__checkbox" type="checkbox" id="input-switch08" disabled="disabled" checked="checked">
        <label class="switch__handle" for="input-switch08"></label>
        <label class="switch__label" for="input-switch08">Disabled state checked</label>
    </div>
</div>

Switch indeterminate state

<div class="inputGroup" id="indeterminateSwitches1">
    <div class="switch switch--small switch--indeterminate">
        <input class="switch__checkbox" type="checkbox" id="input-indeterminateSwitch01">
        <label class="switch__handle" for="input-indeterminateSwitch01"></label>
        <label class="switch__label" for="input-indeterminateSwitch01">Indeterminate state</label>
    </div>
</div>
<div class="inputGroup" id="indeterminateSwitches2">
    <div class="switch switch--indeterminate">
        <input class="switch__checkbox" type="checkbox" id="input-indeterminateSwitch02">
        <label class="switch__handle" for="input-indeterminateSwitch02"></label>
        <label class="switch__label" for="input-indeterminateSwitch02">Indeterminate state</label>
    </div>

</div>
<div class="inputGroup" id="indeterminateSwitches3">
    <div class="switch switch--large switch--indeterminate">
        <input class="switch__checkbox" type="checkbox" id="input-indeterminateSwitch03">
        <label class="switch__handle" for="input-indeterminateSwitch03"></label>
        <label class="switch__label" for="input-indeterminateSwitch03">Indeterminate state</label>
    </div>
</div>

<script>
    /* sample scripting to set the switches above into 'indeterminate' state */
    window.addEventListener("load", function (e) {

        for (var i = 1; i < 4; i++) {
            var switchesContainer = document.querySelector("#indeterminateSwitches" + i);
            var switches = switchesContainer.querySelector(".switch");
            switches.indeterminate = true;
            switches.addEventListener('click', function () {
                this.classList.remove('switch--indeterminate');
            });

        };
    });
</script>

Custom switch

<div class="inputGroup">
    <div class="switch switch--small">
        <input class="switch__checkbox" type="checkbox" id="input-switch12" checked="checked">
        <label class="switch__handle has-bgColor-warning" for="input-switch12">
            <span class="switch__icon"></span>
        </label>
        <label class="switch__label" for="input-switch12">Label and icon are optional</label>
    </div>
</div>

<div class="inputGroup">
    <div class="switch">
        <input class="switch__checkbox" type="checkbox" id="input-switch13" checked="checked">
        <label class="switch__handle has-bgColor-success" for="input-switch13">
            <span class="switch__icon"></span>
        </label>
        <label class="switch__label" for="input-switch13">Label and icon are optional</label>
    </div>
</div>

<div class="inputGroup">
    <div class="switch switch--large">
        <input class="switch__checkbox" type="checkbox" id="input-switch14" checked="checked">
        <label class="switch__handle has-bgColor-petrol" for="input-switch14">
            <span class="switch__icon"></span>
        </label>
        <label class="switch__label" for="input-switch14">Label and icon are optional</label>
    </div>
</div>

Usage

ElementClassDescription
.inputGroup .switch Sets the size of the switch button to medium (default).
.inputGroup .switch .switch--small Sets the size of the switch button to small.
.inputGroup .switch .switch--large Sets the size of the switch button to large.
.inputGroup .switch .switch--indeterminate Applies the visual appearance of an indeterminate switch. Note: This only applies some graphical appearance, the indeterminate state itself has to be set via JavaScript. Clicking / setting and unsetting the control does NOT remove the visual class, this has to be done in addition with e.g. JavaScript.
.inputGroup .switch__handle .has-bgColor-<color name> To specify a background color, any Insights Hub and Industrial IoT background color css class can be used. This class assignment is optional, default is primary/blue.
.inputGroup .switch__handle .switch__icon The icon is optional and needs to be nested in .switch__handle.
.inputGroup .switch .switch__label The label is optional.
Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top