Tipo 01
Sin marcar / marcada
Los dos estados básicos.
Componentes Casillas de verificación
Casillas de verificación
Las casillas permiten marcar una o varias opciones de una lista, o activar una sola opción.
Uso
Úsalas cuando el usuario puede elegir varias opciones independientes, o para aceptar algo (términos y condiciones).
- Elegir varias opciones de una lista
- Aceptar o rechazar una sola opción
- Elegir solo una opción de varias: usa botones de opción
- Activar algo de inmediato: usa un interruptor
Principios
1
Independientes
Marcar una no afecta a las otras.
2
Claras
La etiqueta dice qué pasa al marcar.
3
Clicables
Se puede tocar también la etiqueta, no solo el cuadro.
Tipos
Tipo 02
Indeterminada (padre)
Una casilla padre muestra un guion si solo algunas hijas están marcadas.
Tipo 03
Deshabilitada
No se puede cambiar.
Anatomía
- Contenedor (cuadro)
- Ícono de chulo
- Etiqueta de texto
- Área táctil
Comportamiento
- Tocar la casilla o su etiqueta cambia el estado.
- La casilla padre se marca sola cuando todas las hijas lo están.
- Desmarcar el padre desmarca todas las hijas.
Medidas
| Medida | Valor de referencia |
|---|---|
| Cuadro | 18 × 18 dp, borde 2 dp |
| Radio | 2 dp |
| Área táctil | 48 × 48 dp (web: mín. 24 px) |
| Espacio con la etiqueta | 16 dp |
Medidas de Material Design 2 en dp (en web, 1 dp ≈ 1 px de CSS; en iOS, 1 pt). Son de referencia: verifícalas en la guía oficial antes de usarlas en una evaluación.
Accesibilidad
Usa el input nativo
dentro de un
Grupo nombrado
fieldset y legend, o role="group" con aria-label.
Indeterminado
Se asigna por JavaScript con input.indeterminate = true.