Switch

Custom styling for checkbox and radio inputs

The is-switch modifier can be used to create a clean looking toggle switch for both checkbox and radio elements.

<div class="is-switch">
  <input type="checkbox" id="exampleSwitch">
  <label for="exampleSwitch"></label>
</div>
Copy

It is important that the for attribute of the label element matches the id attribute of the input element, as the label acts as the toggle for the switch.


Rounded

If you are looking for a rounded switch, you can use the is-rounded modifier.

<div class="is-switch is-rounded">
  <input type="checkbox" id="roundedSwitch">
  <label for="roundedSwitch"></label>
</div>
Copy

Radios

You can also use radio elements with switches. Ensure that the value of the name attribute for each of the radio elements is the same.

<div class="column is-shrink">
  <div class="is-switch is-rounded">
    <input type="radio" id="radioSwitch1" name="radio">
    <label for="radioSwitch1"></label>
  </div>
</div>
<div class="column is-shrink">
  <div class="is-switch is-rounded">
    <input type="radio" id="radioSwitch2" name="radio">
    <label for="radioSwitch2"></label>
  </div>
</div>
Copy

Use the checked attribute to toggle the switch to an active state on page load or with JavaScript.


Variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.

Variable Type Default Value
$switch-outer-radius units 20px
$switch-inner-radius units 15px
$switch-background color #dbdbdb
$switch-checked-background color $primary
$switch-height units 2rem
$switch-width units 4rem
$switch-toggle-background color $white
$switch-toggle-height units 1.5rem
$switch-toggle-width units 1.5rem