Estilos

Componentes

Formularios

Organismos

Switch

Los switchs permiten que las personas usuarias alternen entre dos estados posibles, como “prendido” y “apagado”.

Si quieres conocer las buenas prácticas de uso del componente, puedes visitar el siguiente enlace.

Tipos

<label class="switch" for="switch-1">
  <input type="checkbox" id="switch-1" />
  <span class="slider"></span>
  <span class="switch-label on">Prendido</span>
  <span class="switch-label off">Apagado</span>
</label>

<label class="switch" for="switch-2">
  <input type="checkbox" id="switch-2" checked="" />
  <span class="slider"></span>
  <span class="switch-label on">Prendido</span>
  <span class="switch-label off">Apagado</span>
</label>

<label class="switch switch-dark" for="switch-dark-1">
  <input type="checkbox" id="switch-dark-1" />
  <span class="slider"></span>
  <span class="switch-label on">Prendido</span>
  <span class="switch-label off">Apagado</span>
</label>

<label class="switch switch-dark" for="switch-dark-2">
  <input type="checkbox" id="switch-dark-2" checked="" />
  <span class="slider"></span>
  <span class="switch-label on">Prendido</span>
  <span class="switch-label off">Apagado</span>
</label>

Sin label

<label class="switch" for="switch-1">
  <input type="checkbox" id="switch-1" />
  <span class="slider"></span>
  <span class="switch-label on" aria-label="Prendido"></span>
  <span class="switch-label off" aria-label="Apagado"></span>
</label>

<label class="switch" for="switch-2">
  <input type="checkbox" id="switch-2" checked="" />
  <span class="slider"></span>
  <span class="switch-label on" aria-label="Prendido"></span>
  <span class="switch-label off" aria-label="Apagado"></span>
</label>

<label class="switch switch-dark" for="switch-label-hidden-1">
  <input type="checkbox" id="switch-label-hidden-1" />
  <span class="slider"></span>
  <span class="switch-label on" aria-label="Prendido"></span>
  <span class="switch-label off" aria-label="Apagado"></span>
</label>

<label class="switch switch-dark" for="switch-label-hidden-2">
  <input type="checkbox" id="switch-label-hidden-2" checked="" />
  <span class="slider"></span>
  <span class="switch-label on" aria-label="Prendido"></span>
  <span class="switch-label off" aria-label="Apagado"></span>
</label>

Tamaños

<label class="switch" for="switch-1">
  <input type="checkbox" id="switch-1" />
  <span class="slider"></span>
  <span class="switch-label on">Prendido</span>
  <span class="switch-label off">Apagado</span>
</label>

<label class="switch" for="switch-2">
  <input type="checkbox" id="switch-2" checked="" />
  <span class="slider"></span>
  <span class="switch-label on">Prendido</span>
  <span class="switch-label off">Apagado</span>
</label>


<label class="switch switch-sm" for="switch-small-1">
  <input type="checkbox" id="switch-small-1" />
  <span class="slider"></span>
  <span class="switch-label on" aria-label="Prendido"></span>
  <span class="switch-label off" aria-label="Apagado"></span>
</label>

<label class="switch switch-sm" for="switch-small-2">
  <input type="checkbox" id="switch-small-2" checked="" />
  <span class="slider"></span>
  <span class="switch-label on" aria-label="Prendido"></span>
  <span class="switch-label off" aria-label="Apagado"></span>
</label>

Deshabilitado

<label class="switch" for="switch-1">
  <input type="checkbox" id="switch-1" disabled="" />
  <span class="slider"></span>
  <span class="switch-label disabled on">Prendido / Deshabilitado</span>
  <span class="switch-label disabled off">Apagado / Deshabilitado</span>
</label>

<label class="switch" for="switch-2">
  <input type="checkbox" id="switch-2" disabled="" checked="" />
  <span class="slider"></span>
  <span class="switch-label disabled on">Prendido / Deshabilitado</span>
  <span class="switch-label disabled off">Apagado / Deshabilitado</span>
</label>

<label class="switch" for="switch-disabled-1">
  <input type="checkbox" id="switch-disabled-1" disabled="" />
  <span class="slider"></span>
  <span
    class="switch-label disabled on"
    aria-label="Prendido / Deshabilitado"
  ></span>
  <span
    class="switch-label disabled off"
    aria-label="Apagado / Deshabilitado"
  ></span>
</label>

<label class="switch" for="switch-disabled-2">
  <input type="checkbox" id="switch-disabled-2" disabled="" checked="" />
  <span class="slider"></span>
  <span
    class="switch-label disabled on"
    aria-label="Prendido / Deshabilitado"
  ></span>
  <span
    class="switch-label disabled off"
    aria-label="Apagado / Deshabilitado"
  ></span>
</label>