Toggle switch

Toggle switches prompt users to choose between mutually exclusive options. They are based on real-life on/off switches.

Toggles switches are a quick way to view and switch between mutually exclusive options. Use toggles when your intent is to instantly turn something on or off or change its frequency. If a real-life on/off switch would work for the action, a toggle is probably the best component to use.

Classes

Class Description
s-toggle-switch Base parent container for toggle switches
s-toggle-switch--label-off Apply to the “Off” or “None” option so it’s highlighted state isn’t lit up green.

Examples

Base style

Basic toggles switches allow you to choose between two opposing states. The “Off” or “None” option should appear first.

<div class="grid ai-center">
<div class="s-toggle-switch mr8">
<input type="radio" name="group" id="two">
<label for="two" class="s-toggle-switch--label-off">Off</label>
<input type="radio" name="group" id="one" checked>
<label for="one">On</label>
</div>
<label class="s-label"></label>
</div>

3 or more options

Toggles switches can be extended to choose between three or more opposing states.

<div class="grid ai-center">
<div class="s-toggle-switch mr8">
<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>
<label class="s-label"></label>
</div>

Guidelines

Apply the change immediately

Toggles should apply the result immediately and confirm it with a success notice. Toggle switches should never require users to press a “Save” button to apply the change. When you require users to press a submit button with a toggle, you may confuse them because it’s not the expected next step. In those cases, use checkboxes instead.

Toggle switches save and apply changes without an additional step.

Don’t Do

Toggle switches should only save one thing. If they are part of a larger form with a save button, sections should be clearly marked. Or use radio buttons.

Don’t Do

Include a label

Toggle switches should be brief and be accompanied by a <label> that describes the options.

Don’t Do