Checkbox

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

Estado: review

1. Checkbox básico

Acepto la política de privacidad

Mostrar HTML

<div class="gn-checkbox">
  <input class="gn-checkbox__input" type="checkbox" id="chk-basic">
  <label class="gn-checkbox__label" for="chk-basic">
    <span class="gn-checkbox__box" aria-hidden="true"><svg focusable="false" class="gn-checkbox__icon gn-checkbox__icon--check" aria-hidden="true"><use href="#gn-checkbox-icon-check"></use></svg></span>
    <span class="gn-checkbox__content"><span class="gn-checkbox__text">Acepto la política de privacidad</span></span>
  </label>
</div>

2. Checkbox checked

Acepto la política de privacidad

Mostrar HTML

<div class="gn-checkbox">
  <input class="gn-checkbox__input" type="checkbox" id="chk-checked" checked>
  <label class="gn-checkbox__label" for="chk-checked">
    <span class="gn-checkbox__box" aria-hidden="true"><svg focusable="false" class="gn-checkbox__icon gn-checkbox__icon--check" aria-hidden="true"><use href="#gn-checkbox-icon-check"></use></svg></span>
    <span class="gn-checkbox__content"><span class="gn-checkbox__text">Acepto la política de privacidad</span></span>
  </label>
</div>

3. Checkbox con hint

Quiero recibir notificaciones

Puedes darte de baja en cualquier momento.

Mostrar HTML

<div class="gn-field">
  <div class="gn-checkbox">
    <input class="gn-checkbox__input" type="checkbox" id="chk-hint" aria-describedby="chk-hint-text">
    <label class="gn-checkbox__label" for="chk-hint">
      <span class="gn-checkbox__box" aria-hidden="true"><svg focusable="false" class="gn-checkbox__icon gn-checkbox__icon--check" aria-hidden="true"><use href="#gn-checkbox-icon-check"></use></svg></span>
      <span class="gn-checkbox__content">
        <span class="gn-checkbox__text">Quiero recibir notificaciones</span>
      </span>
    </label>
  </div>
  <span class="gn-field__hint" id="chk-hint-text">Puedes darte de baja en cualquier momento.</span>
</div>

4. Checkbox obligatorio

Acepto las condiciones

Este campo es obligatorio.

Mostrar HTML

<div class="gn-field">
  <div class="gn-checkbox">
    <input class="gn-checkbox__input" type="checkbox" id="chk-required" required aria-describedby="chk-required-hint">
    <label class="gn-checkbox__label" for="chk-required">
      <span class="gn-checkbox__box" aria-hidden="true"><svg focusable="false" class="gn-checkbox__icon gn-checkbox__icon--check" aria-hidden="true"><use href="#gn-checkbox-icon-check"></use></svg></span>
      <span class="gn-checkbox__content">
        <span class="gn-checkbox__text">Acepto las condiciones<span class="gn-field__required" aria-hidden="true">*</span><span class="sr-only">obligatorio</span></span>
      </span>
    </label>
  </div>
  <span class="gn-field__hint" id="chk-required-hint">Este campo es obligatorio.</span>
</div>

5. Checkbox con error

Acepto las condiciones

Error: Debes aceptar este campo.

Mostrar HTML

<div class="gn-field">
  <div class="gn-checkbox gn-checkbox--error">
    <input class="gn-checkbox__input" type="checkbox" id="chk-error" required aria-invalid="true" aria-describedby="chk-error-text">
    <label class="gn-checkbox__label" for="chk-error">
      <span class="gn-checkbox__box" aria-hidden="true"><svg focusable="false" class="gn-checkbox__icon gn-checkbox__icon--check" aria-hidden="true"><use href="#gn-checkbox-icon-check"></use></svg></span>
      <span class="gn-checkbox__content">
        <span class="gn-checkbox__text">Acepto las condiciones</span>
      </span>
    </label>
  </div>
  <span class="gn-field__error" id="chk-error-text">
    <svg class="gn-field__error-icon" xmlns="http://www.w3.org/2000/svg" width="3" height="15" viewBox="0 0 3 15" fill="none" aria-hidden="true" focusable="false">
      <path d="M1.50193 14.8389C1.91494 14.8389 2.26787 14.6975 2.56071 14.4146C2.85356 14.1317 3 13.7916 3 13.3944C3 12.9972 2.85291 12.6577 2.55879 12.3761C2.26466 12.0944 1.91109 11.9536 1.49807 11.9536C1.08506 11.9536 0.732128 12.095 0.439286 12.3779C0.146443 12.6608 0 13.0009 0 13.3981C0 13.7953 0.147085 14.1348 0.441214 14.4164C0.735343 14.6981 1.08891 14.8389 1.50193 14.8389ZM3 9.89262V0H0V9.89262H3Z" fill="currentColor"/>
    </svg>
    <span class="gn-field__error-prefix">Error:</span>
    <span class="gn-field__error-text">Debes aceptar este campo.</span>
  </span>
</div>

6. Checkbox disabled

Checkbox deshabilitado

Mostrar HTML

<div class="gn-checkbox">
  <input class="gn-checkbox__input" type="checkbox" id="chk-disabled" disabled>
  <label class="gn-checkbox__label" for="chk-disabled">
    <span class="gn-checkbox__box" aria-hidden="true"><svg focusable="false" class="gn-checkbox__icon gn-checkbox__icon--check" aria-hidden="true"><use href="#gn-checkbox-icon-check"></use></svg></span>
    <span class="gn-checkbox__content"><span class="gn-checkbox__text">Checkbox deshabilitado</span></span>
  </label>
</div>

7. Checkbox indeterminate

Estado mixto Se activa con input.indeterminate = true.

Mostrar HTML

<div class="gn-checkbox gn-checkbox--mix">
  <input class="gn-checkbox__input" type="checkbox" id="chk-mix" data-gn-checkbox-indeterminate aria-describedby="chk-mix-help">
  <label class="gn-checkbox__label" for="chk-mix">
    <span class="gn-checkbox__box" aria-hidden="true"><svg focusable="false" class="gn-checkbox__icon gn-checkbox__icon--mix" aria-hidden="true"><use href="#gn-checkbox-icon-mix"></use></svg></span>
    <span class="gn-checkbox__content">
      <span class="gn-checkbox__text">Estado mixto</span>
      <span class="gn-field__hint" id="chk-mix-help">Se activa con <code>input.indeterminate = true</code>.</span>
    </span>
  </label>
</div>

Mostrar JS

document.addEventListener('DOMContentLoaded', () => {
  window.GNDS.initCheckboxIndeterminate();
});

8. Grupo de checkboxes

¿Cómo prefieres que te contactemos? Selecciona todas las opciones que apliquen. Error: Selecciona al menos una opción.

Teléfono

Correo postal

Mostrar HTML

<fieldset class="gn-field gn-fieldset--invalid" aria-describedby="contact-hint contact-error">
  <legend class="gn-field__legend">¿Cómo prefieres que te contactemos?</legend>
  <span class="gn-field__hint" id="contact-hint">Selecciona todas las opciones que apliquen.</span>
  <span class="gn-field__error" id="contact-error">
    <svg class="gn-field__error-icon" xmlns="http://www.w3.org/2000/svg" width="3" height="15" viewBox="0 0 3 15" fill="none" aria-hidden="true" focusable="false">
      <path d="M1.50193 14.8389C1.91494 14.8389 2.26787 14.6975 2.56071 14.4146C2.85356 14.1317 3 13.7916 3 13.3944C3 12.9972 2.85291 12.6577 2.55879 12.3761C2.26466 12.0944 1.91109 11.9536 1.49807 11.9536C1.08506 11.9536 0.732128 12.095 0.439286 12.3779C0.146443 12.6608 0 13.0009 0 13.3981C0 13.7953 0.147085 14.1348 0.441214 14.4164C0.735343 14.6981 1.08891 14.8389 1.50193 14.8389ZM3 9.89262V0H0V9.89262H3Z" fill="currentColor"/>
    </svg>
    <span class="gn-field__error-prefix">Error:</span>
    <span class="gn-field__error-text">Selecciona al menos una opción.</span>
  </span>
  <div class="gn-field__options">
    <div class="gn-checkbox gn-checkbox--error">
      <input class="gn-checkbox__input" type="checkbox" id="chk-group-email" name="contact" value="email" aria-invalid="true">
      <label class="gn-checkbox__label" for="chk-group-email">
        <span class="gn-checkbox__box" aria-hidden="true"><svg focusable="false" class="gn-checkbox__icon gn-checkbox__icon--check" aria-hidden="true"><use href="#gn-checkbox-icon-check"></use></svg></span>
        <span class="gn-checkbox__content"><span class="gn-checkbox__text">Email</span></span>
      </label>
    </div>
    <div class="gn-checkbox gn-checkbox--error">
      <input class="gn-checkbox__input" type="checkbox" id="chk-group-phone" name="contact" value="phone" aria-invalid="true">
      <label class="gn-checkbox__label" for="chk-group-phone">
        <span class="gn-checkbox__box" aria-hidden="true"><svg focusable="false" class="gn-checkbox__icon gn-checkbox__icon--check" aria-hidden="true"><use href="#gn-checkbox-icon-check"></use></svg></span>
        <span class="gn-checkbox__content"><span class="gn-checkbox__text">Teléfono</span></span>
      </label>
    </div>
    <div class="gn-checkbox gn-checkbox--error">
      <input class="gn-checkbox__input" type="checkbox" id="chk-group-post" name="contact" value="post" aria-invalid="true">
      <label class="gn-checkbox__label" for="chk-group-post">
        <span class="gn-checkbox__box" aria-hidden="true"><svg focusable="false" class="gn-checkbox__icon gn-checkbox__icon--check" aria-hidden="true"><use href="#gn-checkbox-icon-check"></use></svg></span>
        <span class="gn-checkbox__content"><span class="gn-checkbox__text">Correo postal</span></span>
      </label>
    </div>
  </div>
</fieldset>

8b. Grupo de checkboxes — sin error

Preferencias de notificación Recibirás avisos por los canales seleccionados.

SMS

Notificación push

Mostrar HTML

<fieldset class="gn-field" aria-describedby="notif-hint">
  <legend class="gn-field__legend">Preferencias de notificación</legend>
  <span class="gn-field__hint" id="notif-hint">Recibirás avisos por los canales seleccionados.</span>
  <div class="gn-field__options">
    <div class="gn-checkbox">
      <input class="gn-checkbox__input" type="checkbox" id="chk-notif-email" name="notifications" value="email" checked>
      <label class="gn-checkbox__label" for="chk-notif-email">
        <span class="gn-checkbox__box" aria-hidden="true"><svg focusable="false" class="gn-checkbox__icon gn-checkbox__icon--check" aria-hidden="true"><use href="#gn-checkbox-icon-check"></use></svg></span>
        <span class="gn-checkbox__content"><span class="gn-checkbox__text">Email</span></span>
      </label>
    </div>
    <div class="gn-checkbox">
      <input class="gn-checkbox__input" type="checkbox" id="chk-notif-sms" name="notifications" value="sms">
      <label class="gn-checkbox__label" for="chk-notif-sms">
        <span class="gn-checkbox__box" aria-hidden="true"><svg focusable="false" class="gn-checkbox__icon gn-checkbox__icon--check" aria-hidden="true"><use href="#gn-checkbox-icon-check"></use></svg></span>
        <span class="gn-checkbox__content"><span class="gn-checkbox__text">SMS</span></span>
      </label>
    </div>
    <div class="gn-checkbox">
      <input class="gn-checkbox__input" type="checkbox" id="chk-notif-push" name="notifications" value="push">
      <label class="gn-checkbox__label" for="chk-notif-push">
        <span class="gn-checkbox__box" aria-hidden="true"><svg focusable="false" class="gn-checkbox__icon gn-checkbox__icon--check" aria-hidden="true"><use href="#gn-checkbox-icon-check"></use></svg></span>
        <span class="gn-checkbox__content"><span class="gn-checkbox__text">Notificación push</span></span>
      </label>
    </div>
  </div>
</fieldset>

9. Checkbox tiled / card

Opción en tarjeta

Mostrar HTML

<div class="gn-checkbox gn-checkbox--tiled">
  <input class="gn-checkbox__input" type="checkbox" id="chk-tiled" checked>
  <label class="gn-checkbox__label" for="chk-tiled">
    <span class="gn-checkbox__box" aria-hidden="true"><svg focusable="false" class="gn-checkbox__icon gn-checkbox__icon--check" aria-hidden="true"><use href="#gn-checkbox-icon-check"></use></svg></span>
    <span class="gn-checkbox__content"><span class="gn-checkbox__text">Opción en tarjeta</span></span>
  </label>
</div>

10. Checkbox sm

Checkbox tamaño SM

Mostrar HTML

<div class="gn-checkbox gn-checkbox--sm">
  <input class="gn-checkbox__input" type="checkbox" id="chk-sm">
  <label class="gn-checkbox__label" for="chk-sm">
    <span class="gn-checkbox__box" aria-hidden="true"><svg focusable="false" class="gn-checkbox__icon gn-checkbox__icon--check" aria-hidden="true"><use href="#gn-checkbox-icon-check"></use></svg></span>
    <span class="gn-checkbox__content"><span class="gn-checkbox__text">Checkbox tamaño SM</span></span>
  </label>
</div>

11. Checkbox tiled / card sm

Tiled/card tamaño SM

Mostrar HTML

<div class="gn-checkbox gn-checkbox--tiled gn-checkbox--sm">
  <input class="gn-checkbox__input" type="checkbox" id="chk-tiled-sm" checked>
  <label class="gn-checkbox__label" for="chk-tiled-sm">
    <span class="gn-checkbox__box" aria-hidden="true"><svg focusable="false" class="gn-checkbox__icon gn-checkbox__icon--check" aria-hidden="true"><use href="#gn-checkbox-icon-check"></use></svg></span>
    <span class="gn-checkbox__content"><span class="gn-checkbox__text">Tiled/card tamaño SM</span></span>
  </label>
</div>

12. Galería de estados visuales

13. Galería de estados visuales — Tiled

Tiled mixed

Tiled disabled

Tiled disabled checked

Tiled focus visible (simulado)

Tiled errorError:Error text

Checkbox

Enfoque de documentación

Se separan dos capas:

Ejemplos estructurales/funcionales (con “Mostrar HTML”).
Galería visual de estados (sin HTML individual por estado).

Estructura y accesibilidad

Control nativo: input[type="checkbox"].
Etiqueta clicable mediante label asociado por for.
hint y error asociados con aria-describedby usando clases comunes (.gn-field__hint, .gn-field__error).
error con aria-invalid="true" cuando procede.
required nativo cuando el campo es obligatorio.

Estado indeterminate

indeterminate no existe como atributo HTML. Se aplica con JS: input.indeterminate = true.

En docs se usa data-gn-checkbox-indeterminate para inicializar ese estado. No forma parte de la API pública del componente en producción.

Variantes

Tamaños: LG / SM.
Estilos: base y tiled/card.
Estados nativos: default, checked, disabled, focus-visible, error.