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
Usa casillas para opciones que pueden combinarse y diferencia los estados marcados, desmarcados, desactivados y mixtos. Mantén breves las etiquetas y usa el espaciado o los iconos para reforzar el mensaje sin depender solo del color.
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
Usa estos estados de Figma para planificar el diseño visual. En el formulario implementado, prefiere una
casilla nativa con etiqueta asociada y comprueba el foco, la activación con la barra espaciadora y el
contraste en cada estado.
Integración
En Figma, cada checkbox está disponible como componente atómico con variantes (checked, unchecked,
indeterminate, disabled).
El archivo de Figma no incluye código para las casillas. Adapta los estilos elegidos a tu propia
implementación con Tailwind y prueba el control final en el navegador.
Premium
Incluido en versión gratuita