Skip to main content

Toggle switch

Razor
Figma

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 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.
Deprecation: the markup for toggle switches has changed. Please update your toggle switches to match the markup structure detailed on this page.

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="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>

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="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>
Deploys by Netlify