Checkbox

El Checkbox permite marcar o desmarcar una opción de forma independiente. Se usa solo, para confirmar algo, o en grupo, para elegir opciones de una lista.

Propiedades y configuraciones

Cuando usarlo

Úsalo cuando la persona puede elegir varias opciones independientes de una lista (documentos a adjuntar, medios de contacto, temas de interés), o como casilla única para confirmar o aceptar algo explícitamente antes de enviar un formulario.

Si solo se puede elegir una opción, usa Radio (o Radio card si cada opción necesita explicación). Si el cambio se aplica al instante, como una preferencia de la cuenta, usa Switch. Si la lista es muy larga, considera Select múltiple.

Buenas prácticas

Recomendado: Agrupa las opciones bajo una pregunta clara

Encabeza el grupo con una pregunta y aclara que se puede marcar más de una opción.

Recomendado: Usa un checkbox único para confirmaciones explícitas

Para declarar o aceptar algo, usa una sola casilla sin marcar junto al botón de envío.

Recomendado: Usa el estado parcial para “Seleccionar todas”

Si un checkbox padre controla varios hijos, muéstralo parcial cuando solo algunos están marcados.

Recomendado: Explica el error a nivel de grupo

Si falta una selección obligatoria, marca el grupo con error y di en la ayuda qué debe hacer la persona.

Malas prácticas

No recomendado: No lo uses cuando solo se puede elegir una opción

Con opciones excluyentes, los checkboxes permiten respuestas imposibles. Para una única respuesta usa Radio Button.

No recomendado: No redactes opciones en negativo

Las etiquetas en negativo, y peor aún con doble negación, obligan a releer para entender qué pasa al marcar.

No recomendado: No premarques consentimientos ni aceptaciones

Una casilla de consentimiento marcada por defecto no es una aceptación real: la persona debe decidir.

No recomendado: No deshabilites opciones sin explicar por qué

Una opción deshabilitada y sin contexto deja a la persona sin saber si puede acceder a ella ni cómo.

Recomendaciones de accesibilidad

Mantén el input dentro de su label
El kit envuelve el <input type="checkbox"> en un <label class="cl-checkbox">. Así el texto visible es el nombre accesible y toda la etiqueta amplía el área clicable; no separes el texto del control.

Etiqueta el grupo completo
Cuando uses un grupo, relaciona las opciones con su pregunta: role="group" con aria-labelledby apuntando a .cl-choice-field__label (como en la story de grupo anidado), o un <fieldset> con <legend>.

Usa el parcial nativo, no un tercer valor inventado
El estado parcial debe venir de input.indeterminate, que se anuncia como “parcialmente marcado”. La clase ._indeterminate es solo visual y no informa nada a los lectores de pantalla.

Relaciona el padre con sus hijos
En el grupo anidado, el checkbox “Seleccionar todas” referencia a sus hijos con aria-controls para que quede explícito qué opciones modifica.

Asocia el error y la ayuda al grupo
El rojo de .cl-choice-field--error no basta. Vincula el __hint al grupo (p. ej. con aria-describedby) para que el mensaje se anuncie al llegar a las opciones.

Evita deshabilitar sin alternativa
Los controles disabled salen del orden de tabulación y muchas tecnologías de asistencia no los anuncian. Si una opción no está disponible, explícalo en texto visible cerca del grupo.