Ficha
- Categoría
- Forms
- Nivel
- molécula
- Estado
- en revisión
- Radix
- sí
- Actualizado
- 2026-10-26
- Figma
- 468:16054
- Fuente
design-system/componentes/Checkbox.md
Una casilla con etiqueta y texto de ayuda opcional. Radix Checkbox (DR-004).
Cuándo usarlo
- Una elección binaria que aplica al enviar («Mantener sesión iniciada»).
Cuándo NO usarlo
- Ajustes inmediatos on/off: usa un switch. Opciones excluyentes: radio o FilterChip.
Anatomía
Fila gap 12: caja 20 radius-1x (borde 1.5 06-muted; marcada: brand primary + check 16) · etiqueta body/sm-strong + ayuda body/xs.
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
label | Label | texto | Etiqueta |
help | Help | texto | Texto de ayuda |
showHelp | Show help | boolean | true |
disabled | State | default · disabled | default |
checked | Checked | false · true | false |
onCheckedChange, name, id | — | control y formulario | — |
Estados
unchecked · checked · disabled (con o sin marca); foco visible sobre la caja.
Accesibilidad
- role=checkbox con teclado (Espacio) y un input nativo oculto para formularios (Radix); toda la fila es área de pulsación (≥ 24, AA 2.5.8); ayuda por aria-describedby. El check usa Icon tone (on-primary / disabled).
Contenido
La etiqueta dice el resultado al marcar; la ayuda explica la consecuencia («Por 30 días en este dispositivo»).
Errores conocidos
- Ninguno medido.
Changelog
- 2026-10-26 · nace (T-02).