Saltar al contenido principal

Switch

Variante del checkbox que representa una acción activada o desactivada con un estilo visual tipo interruptor. Útil para configuraciones binarias como activar/desactivar notificaciones o modos del sistema.

Uso básico​

Para implementar checkbox usar la clase input y tipo checkbox además se debe utilizar field switch como clase contenedora.

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

Switch con texto​

Agrega un nuevo label con el atributo for con el valor del id asignado al switch

<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>