Switch

On this page we will go through our Switch component

Switches allow the user to select one or more options from a set of items. They can be used in forms, filters, lists etc.

Table of contents

Overview

Each Switch component is based on a global CSS class called “msds-switch”. It is important to include it first as it is the main CSS class. Without it, the UI of the component won’t work.

The Switch makes use of custom styling by replacing the default input element with a pseudo-element selector, yet it keeps the native “checked” boolean property to toggle its state on/off (or checked/unchecked).

<div class="container">
    <div class="row">
        <div class="col-6">
            <label class="msds-switch">
                <input type="checkbox" class="msds-switch__checkbox">
                <span class="msds-switch__slider"></span>
                <span class="msds-switch__label">Slider Default</span>
            </label>
        </div>
        <div class="col-6">
            <label class="msds-switch">
                <input type="checkbox" class="msds-switch__checkbox" checked>
                <span class="msds-switch__slider"></span>
                <span class="msds-switch__label">Slider Checked</span>
            </label>
        </div>
    </div>
</div>

States

The styling of states are defined in the CSS file. Some of the states can be triggered programmatically by setting the relevant property to the input element.

Checked State

It can be checked programmatically by setting the “checked” property to the input element.

<form class="msds-forms">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <label class="msds-switch">
                    <input type="checkbox" class="msds-switch__checkbox" checked>
                    <span class="msds-switch__slider"></span>
                    <span class="msds-switch__label">Slider Checked</span>
                </label>
            </div>
        </div>
    </div>
</form>

Disabled State

It can be disabled programmatically by adding msds-switch--disabled to the components main classes, and setting the “disabled” attribute to the input element.

<form class="msds-forms">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <label class="msds-switch msds-switch--disabled">
                    <input type="checkbox" class="msds-switch__checkbox" disabled>
                    <span class="msds-switch__slider"></span>
                    <span class="msds-switch__label">Slider Disabled</span>
                </label>
            </div>
        </div>
    </div>
</form>

Readonly State

In order to use the switch as read-only, you need to add msds-switch--disabled to the main component wrapper, and add checked to the checkbox input

<form class="msds-forms">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <label class="msds-switch msds-switch--disabled">
                    <input type="checkbox" class="msds-switch__checkbox" checked disabled>
                    <span class="msds-switch__slider"></span>
                    <span class="msds-switch__label">Slider Read Only</span>
                </label>
            </div>
        </div>
    </div>
</form>