Toggle switch

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.

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>

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>

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.

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.

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