Skip to main content
Figuration v4 is now available!
Components

Reusable components built to provide alerts, button groups, cards, input groups, media objects, navigation, and much more.

Switch

Turn checkboxes and radio buttons into toggle switches without the need for JavaScript.

Page Contents

Overview

Similar to our Custom Checkbox and Radio form inputs, we use a wrapping <label>, a hidden <input>, and the sibling selector (~) to control styling based on the <input>'s state.

Switches are height aligned to the to the .form-control inputs. Currently, switches, have not been considered for placement within Input Groups.

Switches may also contain a textual description on either side of the toggle control, Note that any .switch-description items must be placed after the <input.switch-input> element in order to be properly styled. Be sure to provide some form of label for assistive technologies, however you can hide the description with .sr-only or use some other method, such as by using aria-label, to hide the label desciption but keep accessibility.

Checkboxes

<label class="switch">
<input type="checkbox" class="switch-input">
<span class="switch-description">Off</span>
<span class="switch-control"></span>
<span class="switch-description">On</span>
</label>

Radios

<div class="form-group">
<label class="switch">
<input type="radio" class="switch-input" name="radioEx0" checked>
<span class="switch-control"></span>
<span class="switch-description">Option one</span>
</label>
</div>
<div class="form-group">
<label class="switch">
<input type="radio" class="switch-input" name="radioEx0">
<span class="switch-control"></span>
<span class="switch-description">Option two</span>
</label>
</div>

Reversed

Reverse the direction that the toggle switch moves by using .switch-reverse modifier class.

<label class="switch switch-reverse">
<input type="checkbox" class="switch-input">
<span class="switch-description">On</span>
<span class="switch-control"></span>
<span class="switch-description">Off</span>
</label>

Rounded

Use the .switch-rounded modifier class to make switches more rounded.

<label class="switch switch-rounded">
<input type="checkbox" class="switch-input">
<span class="switch-description">Off</span>
<span class="switch-control"></span>
<span class="switch-description">On</span>
</label>

Disabled

Switches can also be disabled. Add the disabled boolean attribute to the <input> and the custom control and label descriptions will be automatically styled.

<label class="switch me-1">
<input type="checkbox" class="switch-input" disabled>
<span class="switch-control"></span>
<span class="switch-description">Disabled checkbox</span>
</label>
<label class="switch">
<input type="radio" class="switch-input" disabled>
<span class="switch-control"></span>
<span class="switch-description">Disabled radio</span>
</label>

Sizing

Want a smaller or larger switch? Add .switch-xs, .switch-sm, .switch-lg, or .switch-xl for additional sizes.

<label class="switch switch-xs me-1">
<input type="checkbox" class="switch-input">
<span class="switch-control"></span>
<span class="switch-description">Extra small</span>
</label>
<label class="switch switch-sm me-1">
<input type="checkbox" class="switch-input">
<span class="switch-control"></span>
<span class="switch-description">Small</span>
</label>
<label class="switch me-1">
<input type="checkbox" class="switch-input">
<span class="switch-control"></span>
<span class="switch-description">Default</span>
</label>
<label class="switch switch-lg me-1">
<input type="checkbox" class="switch-input">
<span class="switch-control"></span>
<span class="switch-description">Large</span>
</label>
<label class="switch switch-xl me-1">
<input type="checkbox" class="switch-input">
<span class="switch-control"></span>
<span class="switch-description">Extra large</span>
</label>

Sizing also works for rounded switches.

<label class="switch switch-rounded switch-xs me-1">
<input type="checkbox" class="switch-input">
<span class="switch-control"></span>
<span class="switch-description">Extra small</span>
</label>
<label class="switch switch-rounded switch-sm me-1">
<input type="checkbox" class="switch-input">
<span class="switch-control"></span>
<span class="switch-description">Small</span>
</label>
<label class="switch switch-rounded me-1">
<input type="checkbox" class="switch-input">
<span class="switch-control"></span>
<span class="switch-description">Default</span>
</label>
<label class="switch switch-rounded switch-lg me-1">
<input type="checkbox" class="switch-input">
<span class="switch-control"></span>
<span class="switch-description">Large</span>
</label>
<label class="switch switch-rounded switch-xl me-1">
<input type="checkbox" class="switch-input">
<span class="switch-control"></span>
<span class="switch-description">Extra large</span>
</label>

Contextual Variations

Use contextual modifier classes to alter the color of the switch.

Conveying Meaning to Assistive Technologies

Please refer to the Accessiblity notes about conveying meaning with color.

<div class="form-group">
<label class="switch">
<input type="checkbox" class="switch-input">
<span class="switch-control"></span>
<span class="switch-description">Default</span>
</label>
</div>
<div class="form-group">
<label class="switch switch-primary">
<input type="checkbox" class="switch-input">
<span class="switch-control"></span>
<span class="switch-description">Primary</span>
</label>
</div>
<div class="form-group">
<label class="switch switch-secondary">
<input type="checkbox" class="switch-input">
<span class="switch-control"></span>
<span class="switch-description">Secondary</span>
</label>
</div>
<div class="form-group">
<label class="switch switch-success">
<input type="checkbox" class="switch-input">
<span class="switch-control"></span>
<span class="switch-description">Success</span>
</label>
</div>
<div class="form-group">
<label class="switch switch-info">
<input type="checkbox" class="switch-input">
<span class="switch-control"></span>
<span class="switch-description">Info</span>
</label>
</div>
<div class="form-group">
<label class="switch switch-warning">
<input type="checkbox" class="switch-input">
<span class="switch-control"></span>
<span class="switch-description">Warning</span>
</label>
</div>
<div class="form-group">
<label class="switch switch-danger">
<input type="checkbox" class="switch-input">
<span class="switch-control"></span>
<span class="switch-description">Danger</span>
</label>
</div>