Toggle switch

Figma

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

Styles

Section titled Styles

Basic toggle

Section titled 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">…</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

Section titled 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.

<div class="d-flex ai-center g8">
    <label class="s-label c-default">…</label>
    <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">@Svg.Icon1</label>
        <input type="radio" name="group1" id="input-2" value="value2">
        <label for="input-2" aria-label="Second value" title="Second value">@Svg.Icon2</label>
        <input type="radio" name="group1" id="input-3" value="value3">
        <label for="input-3" aria-label="Third value" title="Third value">@Svg.Icon3</label>
    </div>
</div>

Search Style

Export Type