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.

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.

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>

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>