Checkbox

Visión General

El componente Checkbox UI en Emvi UI permite a los usuarios seleccionar una o varias opciones dentro de un conjunto. Es uno de los controles de formulario más comunes y su diseño está optimizado para ser claro, accesible y consistente en todas las plataformas.

Se basa en tokens de diseño que definen color, tamaño, espaciado y estados interactivos, garantizando que se adapte tanto a tema claro como oscuro. Incluye soporte para estados indeterminado, útil en casos donde la selección parcial aplica (ejemplo: listas anidadas).

Herramienta de selección simple

La Checkbox es una herramienta sencilla para que los usuarios hagan selecciones. Se encuentra comúnmente en formularios, configuraciones y encuestas, donde los usuarios necesitan elegir entre opciones de sí o no. Esta simplicidad hace que las casillas de verificación sean un componente fundamental para varias interfaces, proporcionando una forma clara e intuitiva de capturar las preferencias del usuario.

Anatomía del Checkbox

Caja de selección: cuadrada, con estados vacío, marcado o indeterminado.
Etiqueta asociada: texto clickable que mejora la accesibilidad.
Área de foco: resaltada al navegar con teclado.
Iconografía opcional: checkmark, guion (indeterminado), o íconos personalizados.

Variantes de Checkbox

Estándar: caja y label a la derecha.
Con etiqueta antes: label a la izquierda, útil en diseños horizontales.
Inline: para formularios densos.
Deshabilitado: mantiene contraste suficiente para comunicar estado.
Indeterminado: comunica selección parcial.

Versatilidad en uso

Las casillas de verificación son muy versátiles y pueden usarse en numerosos contextos. Ya sea para permitir que los usuarios acepten términos, seleccionen múltiples elementos de una lista o activen/desactiven configuraciones, las casillas de verificación ofrecen una solución flexible. Su naturaleza binaria (seleccionado o no seleccionado) garantiza que las elecciones del usuario sean fácilmente entendidas y procesadas.

Mejorando la experiencia del usuario

Las casillas de verificación contribuyen a una mejor experiencia del usuario al hacer que las interacciones sean sencillas. Los usuarios pueden escanear y seleccionar opciones rápidamente sin confusión, lo que es particularmente útil en formularios o al administrar listas. La clara retroalimentación visual de una casilla marcada o no marcada brinda a los usuarios confirmación inmediata de sus selecciones. Nuestro UI KIT incluye una variedad de estilos de casillas de verificación personalizables para integrarse perfectamente en cualquier diseño, asegurando tanto funcionalidad como consistencia visual.

Accesibilidad

Los checkboxes cumplen con WCAG:
role="checkbox" con atributos aria-checked.
Labels asociados mediante for/id.
Estados visibles de foco y activación con teclado (barra espaciadora).
Contraste validado en todas las variantes.

Integración

En Figma, cada checkbox está disponible como componente atómico con variantes (checked, unchecked, indeterminate, disabled).

En Tailwind CSS, se implementa con clases como form-checkbox, rounded, checked:bg-primary-500, focus:ring-2, y admite personalización en tailwind.config.js.