Sections
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 |
Class to apply toggle switch styling to input[type="checkbox"] or on a parent of multiple input[type="radio"] elements. |
.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 ExamplesSingle
Section titled SingleA 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="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>3 or more options
Section titled 3 or more optionsToggles 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="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="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>