Skip to content
STYLESCAPE

Switch

Examples for the ss-c-switch module: a native <input type="checkbox" role="switch"> drawn as a track and knob. It works without JavaScript; screen readers announce it as a switch that is on or off. Square by default, like the other form controls; --round gives the pill shape.

Default

HTML 
<label class="ss-c-switch">
            <input type="checkbox" role="switch" class="ss-c-switch__input">
            <span>Wi-Fi</span>
        </label>
        <label class="ss-c-switch">
            <input type="checkbox" role="switch" class="ss-c-switch__input" checked>
            <span>Bluetooth</span>
        </label>

Label left or right

The text goes where it sits in the source. --between spreads a settings row across its container.

HTML 
<div style="display: grid; gap: 12px; max-width: 360px">
            <label class="ss-c-switch">
                <span>Label before</span>
                <input type="checkbox" role="switch" class="ss-c-switch__input" checked>
            </label>
            <label class="ss-c-switch ss-c-switch--between">
                <span>Show grid</span>
                <input type="checkbox" role="switch" class="ss-c-switch__input">
            </label>
            <label class="ss-c-switch ss-c-switch--between">
                <span>Snap to grid</span>
                <input type="checkbox" role="switch" class="ss-c-switch__input" checked>
            </label>
        </div>

Sizes and shape

HTML 
<label class="ss-c-switch ss-c-switch--sm">
            <input type="checkbox" role="switch" class="ss-c-switch__input" checked>
            <span>Small</span>
        </label>
        <label class="ss-c-switch">
            <input type="checkbox" role="switch" class="ss-c-switch__input" checked>
            <span>Medium</span>
        </label>
        <label class="ss-c-switch ss-c-switch--lg">
            <input type="checkbox" role="switch" class="ss-c-switch__input" checked>
            <span>Large</span>
        </label>
        <label class="ss-c-switch ss-c-switch--round">
            <input type="checkbox" role="switch" class="ss-c-switch__input" checked>
            <span>Round</span>
        </label>

Disabled

HTML 
<label class="ss-c-switch">
            <input type="checkbox" role="switch" class="ss-c-switch__input" disabled>
            <span>Off, disabled</span>
        </label>
        <label class="ss-c-switch">
            <input type="checkbox" role="switch" class="ss-c-switch__input" checked disabled>
            <span>On, disabled</span>
        </label>

Without a wrapper

The input carries its own size, so it can sit next to a separate label, in a table cell or a toolbar.

HTML 
<input type="checkbox" role="switch" class="ss-c-switch__input" id="switch-autosave" checked>
        <label for="switch-autosave" style="margin-inline-start: 8px">Autosave</label>

Legacy markup (ss-c-slider)

The older label.ss-c-switch > input + span.ss-c-slider markup (also used by many demos) is styled the same way: the input stays focusable on top of the track, the span draws it. ss-c-round is the legacy name for the pill shape. On an input[type=range], ss-c-slider is an alias of ss-c-range.

HTML 
<label class="ss-c-switch">
            <input type="checkbox" aria-label="Legacy switch">
            <span class="ss-c-slider"></span>
        </label>
        <label class="ss-c-switch">
            <input type="checkbox" checked aria-label="Legacy round switch">
            <span class="ss-c-slider ss-c-round"></span>
        </label>
        <input type="range" class="ss-c-slider" aria-label="Legacy range slider" value="30" style="max-width: 240px">