Top

Usage

A switch is a replacement for standard checkboxes where a binary choice is represented with a visual on or off state. To enable switches, wrap all checkboxes with the following markup.

<label class="switch" for="checkbox">
    <!-- Original checkbox -->
    <input type="checkbox" name="setting" id="checkbox" value="1">

    <!-- Toggle bar -->
    <span class="switch-bar">
        <span class="switch-toggle"></span>
    </span>
</label>
The wrapping label and order of elements is mandatory.

Disabled Switch

To disable a switch, add disabled to the input and .is-disabled to .switch.

<label class="switch is-disabled">
    <input type="checkbox" disabled>
    ...
</label>

Custom Labels

To add labels for the on and off states, specific data attributes on .switch-bar can be defined.

<span class="switch-bar" data-switch-on="On" data-switch-off="Off">
    ...
</span>
Labels are rendered using attr() with ::before (on state) and ::after (off state) pseudo elements.

Stacked Labels

By default, the inactive label is hidden by the sliding toggle. To place labels on top of the toggle, add the .switch--stacked modifier to .switch.

<label class="switch switch--stacked">
    ...
</label>

Sizes

Adding .small or .large to the .switch will alter the font size, padding, and height.

<label class="switch small">
    ...
</label>

Shapes

Adding .round or .pill to the .switch-bar will alter the border radius.

<label class="switch">
    ...

    <div class="switch-bar pill">...</div>
</label>

Notes

  • Switches use :checked on the original checkbox for their on state.
Top

Variables

Variable Default Description
$switch-class .switch CSS class name for the switch element.
$switch-class-bar .switch-bar CSS class name for the switch bar that wraps the toggle.
$switch-class-toggle .switch-toggle CSS class name for the switch toggle button.
$switch-class-modifier-stacked .switch--stacked CSS class name for the switch stacked modifier.
$switch-effects ("pill") List of effects to include in the CSS output. Accepts pill.
$switch-modifiers ("stacked") List of modifiers to include in the CSS output. Accepts stacked.
$switch-transition .3s The transition time for toggle sliding and switch fading.