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-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
| Element | Class | Description |
|---|
.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 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. |