Switch
Binary switch for on and off states.
Binary switch for on and off states.
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>
label
and order of elements is mandatory.
To disable a switch, add disabled
to the input and .is-disabled
to .switch
.
<label class="switch is-disabled">
<input type="checkbox" disabled>
...
</label>
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>
attr()
with ::before
(on state) and ::after
(off state) pseudo elements.
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>
Adding .small
or .large
to the .switch
will alter the font size, padding, and height.
<label class="switch small">
...
</label>
Adding .round
or .pill
to the .switch-bar
will alter the border radius.
<label class="switch">
...
<div class="switch-bar pill">...</div>
</label>
:checked
on the original checkbox for their on state.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. |