Checkbox

Revisa y prueba el componente en código

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

Selección múltiple en formularios. Usa el bloque BEM .cl-checkbox del Kit Digital.

Básico

<label class="cl-checkbox">
  <input class="cl-checkbox__input" type="checkbox" />
  <span class="cl-checkbox__control" aria-hidden="true"></span>
  <span class="cl-checkbox__text">Texto de ejemplo</span>
</label>

Seleccionado

<label class="cl-checkbox">
  <input class="cl-checkbox__input" type="checkbox" checked />
  <span class="cl-checkbox__control" aria-hidden="true"></span>
  <span class="cl-checkbox__text">Texto de ejemplo</span>
</label>

Parcial

<label class="cl-checkbox _indeterminate">
  <input class="cl-checkbox__input" type="checkbox" />
  <span class="cl-checkbox__control" aria-hidden="true"></span>
  <span class="cl-checkbox__text">Seleccionar todas</span>
</label>

Grupo

<div class="cl-choice-field" role="group" aria-labelledby="cl-checkbox-tree-label">
  <div class="cl-choice-field__question">
    <p class="cl-choice-field__label" id="cl-checkbox-tree-label">Notificaciones</p>
    <p class="cl-choice-field__description">Elige sobre qué temas quieres recibir avisos</p>
  </div>
  <div class="cl-checkbox-group">
    <label class="cl-checkbox">
      <input class="cl-checkbox__input" type="checkbox" checked />
      <span class="cl-checkbox__control" aria-hidden="true"></span>
      <span class="cl-checkbox__text">Trámites y solicitudes</span>
    </label>
    <label class="cl-checkbox">
      <input class="cl-checkbox__input" type="checkbox" />
      <span class="cl-checkbox__control" aria-hidden="true"></span>
      <span class="cl-checkbox__text">Mensajes de la institución</span>
    </label>
    <label class="cl-checkbox">
      <input class="cl-checkbox__input" type="checkbox" />
      <span class="cl-checkbox__control" aria-hidden="true"></span>
      <span class="cl-checkbox__text">Novedades del servicio</span>
    </label>
  </div>
</div>