Checkbox

Un checkbox permite seleccionar múltiples opciones de un grupo o activar y desactivar un valor individual.

Tipos

Individual

Un solo checkbox aislado se usa para confirmar una decisión binaria opcional, como aceptar términos o suscribirse a una novedad. Si la acción es central para continuar, considera otro control.

Grupo

Cuando varias opciones del mismo conjunto pueden seleccionarse de forma independiente, agrúpalas bajo un mismo label. El label del grupo debe describir qué tienen en común las opciones.

Estados

Mixed

El estado mixed (indeterminate) se usa en un checkbox padre cuando algunas de sus opciones hijas están seleccionadas y otras no. Comunica que la decisión es parcial sin perder el control de seleccionar todo o nada.

Deshabilitado

  • Usa disabled cuando la opción no aplica en el contexto actual pero podría aplicar en otro.
  • Evita ocultar opciones en lugar de deshabilitarlas si su presencia ayuda a entender el sistema.
  • Si la razón del disabled no es obvia, explica el motivo cerca del control.

Layout

Orientación

  • Vertical por defecto: facilita el escaneo y soporta labels de cualquier longitud.
  • Horizontal solo para grupos cortos de 2 a 3 opciones con labels breves.
  • Mantén alineación de checkbox y label estable cuando el label ocupa más de una línea.

Densidad

  • Usa el tamaño medium (por defecto) en formularios y panels.
  • Usa large cuando la opción tiene impacto financiero o legal y requiere mayor presencia.
  • Mantén tamaño consistente dentro del mismo grupo.

Accesibilidad

Label asociado

  • Todo checkbox debe tener un label visible o un aria-label cuando el contexto no permite mostrar texto.
  • El label completo del checkbox debe ser clickeable para activar el control.
  • El grupo se debe envolver en un contenedor con role="group" y aria-labelledby apuntando al título del grupo.

Teclado

  • Tab navega entre checkboxes; Espacio alterna el estado.
  • No agrupes checkboxes con flechas: usa Tab para mantener la convención de selección múltiple.
  • El estado mixed se anuncia automáticamente cuando aria-checked="mixed".

Contenido

Labels

  • Empieza con la palabra clave: el sujeto u objeto de la opción.
  • Evita formularlos como pregunta: no escribas “¿Recibir alertas?”, escribe “Recibir alertas”.
  • No uses la negación: prefiere “Compartir actividad” en lugar de “No compartir actividad”.