Switch

Switches are an elegant way for turning features on / off.

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

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-functionalYellow" 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-functionalGreen" 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__handle .has-bgColor-<color name> To specify a background color, any Mindsphere background color css class can be used. This class assignment is optional, default is 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 MindSphere Development License Agreement.
Back to top