Switch

A variant of the checkbox that represents an on or off action with a visual switch-style. Useful for binary settings like enabling/disabling notifications or system modes.

Basic Usage

To implement a switch, use the input class with type checkbox. Additionally, field switch should be used as the container class.

<div class="field switch">
  <input type="checkbox" role="switch" id="switch1" />
  <label class="slider" for="switch1"></label>
</div>

Switch with Text

Add a new label with the for attribute set to the value of the switch's id.

Activar la carta

<div class="is-hstack">
  <div class="field switch">
    <input type="checkbox" role="switch" id="switch2" />
    <label class="slider" for="switch2"></label>
  </div>
  <label for="switch2">Activar la carta</label>
</div>