Sections

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, but can contain multiple options.

Classes

Section titled Classes
Class Description
.s-toggle-switch Base parent container for toggle switches
.s-toggle-switch--indicator Renders the toggle switch
.s-toggle-switch__multiple Modifies the base container to accept multiple options
.s-toggle-switch--label-off Apply to the “Off” or “None” option so it’s highlighted state isn’t lit up green.

Examples

Section titled Examples

Single

Section titled Single

A single toggle is appropriate for simple “on/off” states eg. enabling emails, markdown editing, or various cookies. 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="grid ai-center">
    <label class="grid--cell s-label" for="toggle-example-1">…</label>
    <div class="grid--cell s-toggle-switch">
        <input id="toggle-example-1" type="checkbox">
        <div class="s-toggle-switch--indicator"></div>
    </div>
</div>

3 or more options

Section titled 3 or more options

Toggles switches can be extended to choose between three or more states—in this case, the user is setting the frequency of an email digest. Use the multiple toggle instead of a radio group when unifying the aesthetics is important.

<div class="grid gs8 ai-center">
    <label class="grid--cell s-label c-default">…</label>
    <div class="grid--cell s-toggle-switch s-toggle-switch__multiple">
        <input type="radio" name="group" id="four" checked>
        <label for="four" class="s-toggle-switch--label-off">Off</label>
        <input type="radio" name="group" id="one">
        <label for="one">Weekly</label>
        <input type="radio" name="group" id="two">
        <label for="two">Daily</label>
        <input type="radio" name="group" id="three">
        <label for="three">3 hrs</label>
    </div>
</div>
Edit on GitHub