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>