Switch

Revisa y prueba el componente en código

Observa los componentes y sus propiedades para adaptarlos a tus necesidades específicas.

Alternancia de estados on/off. Usa el bloque BEM .cl-switch del Kit Digital.

Apagado

<label class="cl-switch">
  <span class="cl-switch__label">Texto de ejemplo</span>
  <input class="cl-switch__input" type="checkbox" role="switch" />
  <span class="cl-switch__track" aria-hidden="true"></span>
</label>

Encendido

<label class="cl-switch">
  <span class="cl-switch__label">Texto de ejemplo</span>
  <input class="cl-switch__input" type="checkbox" role="switch" checked />
  <span class="cl-switch__track" aria-hidden="true"></span>
</label>

Grupo

<div class="cl-choice-field cl-choice-field--switch">
  <div class="cl-choice-field__question">
    <p class="cl-choice-field__label">Label</p>
    <p class="cl-choice-field__description">Descripción de la pregunta (opcional)</p>
  </div>
  <div class="cl-choice-field__options">
    <label class="cl-switch">
      <span class="cl-switch__label">Recibir notificaciones por correo</span>
      <input class="cl-switch__input" type="checkbox" role="switch" checked />
      <span class="cl-switch__track" aria-hidden="true"></span>
    </label>
    <label class="cl-switch">
      <span class="cl-switch__label">Recibir notificaciones por SMS</span>
      <input class="cl-switch__input" type="checkbox" role="switch" />
      <span class="cl-switch__track" aria-hidden="true"></span>
    </label>
  </div>
</div>

Deshabilitado

<label class="cl-switch">
  <span class="cl-switch__label">Texto de ejemplo</span>
  <input class="cl-switch__input" type="checkbox" role="switch" disabled />
  <span class="cl-switch__track" aria-hidden="true"></span>
</label>