Checkbox

Control de selección múltiple disponible en variante estándar y de tarjeta (Tiled), con soporte para el estado indeterminado.

Estado: draftEtiquetas: form, input, checkbox, selection

Vista Previa

Checkbox LG (Default)


Checkbox SM



Checkbox Tiled (Card) LG


Checkbox Tiled (Card) SM


# Componente Checkbox

A diferencia del componente original de Figma (que usa directivas div), este componente HTML aprovecha la semántica nativa montándose sobre <input type="checkbox"> más su <label>. Esto asegura lectura por parte de *screen readers* y que el teclado (Tab / Espacio) funcione con normalidad.

Estados basados en CSS

- Interacción: El componente interactúa dinámicamente con las pseudo-clases nativas: :focus-visible, :checked, :disabled. - Indeterminado: La clase estática .gn-checkbox--mix unida a un checkbox no-checked despliega el guión central. - Tamaños: Por defecto emplea LG (cajas de 24x24). Utiliza la clase .gn-checkbox--sm para contraerlo a la variante pequeña (19x19). - Tarjetas Tiled: Usando la clase multiplicadora .gn-checkbox--tiled sobre el contender, se transforma el checkbox en una tarjeta/recuadro completo.

HTML

<div class="gn-checkbox">
  <input class="gn-checkbox__input" type="checkbox" id="checkbox-base" />
  <label class="gn-checkbox__label" for="checkbox-base">
    <span class="gn-checkbox__box" aria-hidden="true">
      <svg class="gn-checkbox__icon gn-checkbox__icon--check" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
  <path d="M19.1744 7.00179C19.4702 7.29406 19.6364 7.69041 19.6364 8.10368C19.6364 8.51694 19.4702 8.91329 19.1744 9.20556L11.2847 16.9982C10.9887 17.2904 10.5875 17.4546 10.169 17.4546C9.75063 17.4546 9.34935 17.2904 9.05344 16.9982L5.89754 13.8812C5.6101 13.5872 5.45105 13.1935 5.45465 12.7849C5.45824 12.3763 5.6242 11.9854 5.91676 11.6964C6.20933 11.4074 6.60509 11.2435 7.01883 11.24C7.43256 11.2364 7.83115 11.3935 8.12876 11.6774L10.169 13.6926L16.9432 7.00179C17.2391 6.70961 17.6404 6.54547 18.0588 6.54547C18.4772 6.54547 18.8785 6.70961 19.1744 7.00179Z" fill="currentColor"/>
</svg>
      <svg class="gn-checkbox__icon gn-checkbox__icon--mix" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 3" fill="none">
  <path d="M12.3846 0C13.2768 0 14 0.671573 14 1.5C14 2.32843 13.2768 3 12.3846 3H1.61538C0.723232 3 0 2.32843 0 1.5C0 0.671573 0.723232 0 1.61538 0L12.3846 0Z" fill="currentColor"/>
</svg>
    </span>
    <span class="gn-checkbox__content">
      <span class="gn-checkbox__text">Label text</span>
    </span>
  </label>
</div>