Figma Edit

Toggle switch

A toggle is used to quickly switch between two or more possible states. They are most commonly used for simple "on/off" switches.

Classes

Class	Description	Parent	Modifies
`.s-toggle-switch`	Base toggle switch style.	N/A	N/A
`.s-toggle-switch__multiple`	Used to style toggle switches with three or more options.	N/A	`.s-toggle-switch`

Styles

Basic toggle

Toggle switches take up less space than an “on/off” radio button group and communicate their intended purpose more clearly than a checkbox that toggles functionality. They also provide consistency between desktop and mobile experiences.

<div class="d-flex ai-center g8">
    <label class="s-label" for="toggle-example-default">…</label>
    <input
        class="s-toggle-switch"
        id="toggle-example-default"
        type="checkbox"
    />
</div>
<div class="d-flex ai-center g8">
    <label class="s-label" for="toggle-example-checked">…</label>
    <input
        class="s-toggle-switch"
        id="toggle-example-checked"
        type="checkbox"
        checked
    />
</div>
<div class="d-flex ai-center g8">
    <label class="s-label" for="toggle-example-disabled">…</label>
    <input
        class="s-toggle-switch"
        id="toggle-example-disabled"
        type="checkbox"
        disabled
    />
</div>
<div class="d-flex ai-center g8">
    <label class="s-label" for="toggle-example-checked-disabled">…</label>
    <input
        class="s-toggle-switch"
        id="toggle-example-checked-disabled"
        type="checkbox"
        disabled
        checked
    />
</div>

Default

Checked

Disabled

Checked and disabled

Two or more options with icons

Toggles switches can be extended to choose between two or more states where each state is represented by an icon. Using the __multiple toggle instead of a radio group and making sure labels follow their inputs in this case is important.

<fieldset>
    <div class="d-flex ai-center g8">
        <legend class="s-label c-default">…</legend>
        <div class="s-toggle-switch s-toggle-switch__multiple">
            <input
                type="radio"
                name="group1"
                id="input-1"
                checked
                value="value1"
            />
            <label for="input-1" aria-label="First value" title="First value"
                >…</label
            >
            <input type="radio" name="group1" id="input-2" value="value2" />
            <label for="input-2" aria-label="Second value" title="Second value"
                >…</label
            >
            <input type="radio" name="group1" id="input-3" value="value3" />
            <label for="input-3" aria-label="Third value" title="Third value"
                >…</label
            >
        </div>
    </div>
</fieldset>