Checkbox

Una casilla con etiqueta y ayuda opcional (Radix, DR-004): una elección binaria que aplica al enviar.

Abrir en Figma (468:16054)

Checked false · true · disabled

Por 30 días en este dispositivo

No disponible en el piloto

Lo fija el administrador

Ficha

Categoría
Forms
Nivel
molécula
Estado
en revisión
Radix
sí
Actualizado
2026-10-26
Fuente
design-system/componentes/Checkbox.md

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

PropFigmaValoresPor defecto
labelLabeltextoEtiqueta
helpHelptextoTexto de ayuda
showHelpShow helpbooleantrue
disabledStatedefault · disableddefault
checkedCheckedfalse · truefalse
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).

Tokens que consume