Sistema de diseño
Checkbox
Es un componente de interfaz que permite a los usuarios seleccionar una o varias opciones dentro de un conjunto.
Figma
Storybook
AEM
Overview
Es un elemento fundamental en formularios, listados y configuraciones que requieren la entrada de datos.
El diseño del checkbox debe ser consistente con el estilo general del sistema de diseño, manteniendo coherencia en colores, tipografía y otros elementos visuales que sigan las pautas establecidas.
El tamaño del checkbox y el espaciado con otros elementos circundantes, deben ser lo suficientemente grandes para que la selección sea fácil y precisa, evitando errores de interacción.
Nombre
Descripción / Uso
Ejemplo
No items found.
Variantes
Al ser un elemento de formulario, tiene variantes que corresponden a los diferentes estados en los que puede aparecer:
Default & Default hover
Los estados predeterminados más comunes para el checkbox
Error & Error hover
Indica que la selección ha fallado por algún motivo.
Disable
Indica que el checkbox no está disponible para la interacción.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Opciones
Cada una de las variantes del componente tiene las siguientes opciones de configuración:
Selection
Proporciona un feedback claro cuando el usuario selecciona o deselecciona el checkbox.
Label
En algunos casos, el label puede no ser necesario si el checkbox por sí mismo es suficiente para que el usuario entienda el proceso de selección.
Label with icon
Es posible añadir un ícono junto al label para proporcionar información adicional sobre la acción. Este ícono solo se muestra si el label está activado, y es útil para proporcionar detalles adicionales, como un ícono de información.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Behaviour
Overflow / Resizing
No se recomienda utilizar un label con más de una línea de texto. Si el label excede el espacio disponible, crecerá verticalmente mientras el checkbox se mantendrá alineado con la primera línea de texto.
Links
Al hacer clic en un hipervínculo, se pueden abrir diferentes tipos de elementos emergentes. A continuación, algunas recomendaciones según el tipo de información:
• Contenido Legal Extenso: Abre una nueva pestaña para mostrar documentos largos, como la política de privacidad, información contractual, etc.
• Información Relacionada Extensa: Usa una nueva pestaña para mostrar contenido relacionado extenso, como detalles adicionales sobre un producto. Por ejemplo, ver más sobre la compatibilidad del lubricante seleccionado.
• Información sobre Promociones: Un modal es ideal para términos específicos de descuentos, actividades, etc.
• Información Adicional: Un popover es adecuado para proporcionar detalles adicionales, como descripciones de términos, fases de una actividad, recomendaciones, etc.
• Feedback de Proceso o Formulario: Un tooltip ofrece feedback inmediato sobre procesos o formularios. Algunos ejemplos son: “Pendiente de validar”, “Hoy a las 13:45:55”, “Filtrar por región”, “Válido hasta el 31 de febrero de 2023”, etc.
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
Anterior
Overview componentes
Siguiente
Overview componentes