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

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

CSS variables

You can use the following CSS variables to customize the switch.

.is-switch {
  --track-radius: 0;
  --track-rounded-radius: 20px;
  --track-background-color: hsl(0deg, 0%, 86%, 1);
  --active-track-background-color: var(--color-primary);
  --track-height: 2rem;
  --track-width: 4rem;

  --toggle-radius: 0;
  --toggle-rounded-radius: 15px;
  --toggle-background-color: var(--color-white);
  --toggle-height: 1.5rem;
  --toggle-width: 1.5rem;
}
Copy

Sass variables

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