Checkbox

El diseño del checkbox debe ser coherente con el sistema de diseño de Energy, respetando los estilos definidos en cuanto a colores, tipografías y espaciados.
Su tamaño y separación con elementos adyacentes deben garantizar una interacción cómoda y precisa, evitando errores de clic.

El componente cuenta con distintas variantes que representan los diferentes estados en los que puede encontrarse:

Cada una de las variantes tienen las siguientes opciones de configuración:

• Label: Puede incluirse o no, dependiendo del contexto. Si el propósito del checkbox es evidente por sí mismo, se puede omitir el label.
• Label con icono: Se puede añadir un ícono informativo junto al label para ampliar el contexto. Solo se muestra si el label está activado.

El comportamiento del componente define cómo interactúa el checkbox con el usuario en diferentes escenarios de uso. Incluye aspectos como la respuesta visual al hacer clic, la gestión del contenido (por ejemplo, labels extensos), o la interacción con enlaces.

Constraints

Máximo contenido: No hay un límite máximo de contenido, pero es recomendable usar textos breves y claros para que todo se vea ordenado y evitar que el texto salte de línea innecesariamente.

Overflow: Si el texto es muy largo, la etiqueta se ajusta en varias líneas, pero el checkbox siempre se mantiene alineado con la primera línea para que todo se vea bien organizado.

Grouping

Deja un espacio de 16px entre cada elemento. Si añades un título para agruparlos, asegúrate de dejar el doble de espacio (32px) entre el título y los ítems para que todo respire mejor visualmente.

Grouping vertical: Puedes escribir tanto como necesites, pero lo ideal es usar textos cortos y claros para que todo se vea bien y no se generen saltos de línea innecesarios.

Grouping horizontal: Es mejor usarlo solo cuando las etiquetas son cortas o si estás seguro de que hay espacio suficiente para que no se corten ni salten de línea.

Errores en grouping: Cuando ocurre un error en elementos relacionados entre sí, se recomienda marcar en estado de error todas las opciones bloqueantes. En caso de necesitar mostrar un mensaje de ayuda, se hará al final de la agrupación, utilizando estilo caption 2.

Esta situación se debería evitar previamente deshabilitando u ocultando opciones incompatibles para el usuario.

Indeterminate checkbox - Grouping anidado

Cuando se agrupan varios checkbox dentro de otro, puede pasar que no todos estén marcados o desmarcados. En ese caso, se muestra un estado intermedio para indicar que la selección está a medias.

None selected: Ni el checkbox principal, ni ninguno de los interiores está seleccionado.

Indeterminado: Si marcas solo alguna de las interiores, la principal pasará a un estado intermedio para reflejar que la selección no es completa.

Checked: Estado en el que todas las opciones están seleccionadas. Si desmarcas la checkbox principal, se desactivarán automáticamente todas las interiores. Si desmarcas solo alguna interior, la principal pasará a un estado intermedio para reflejar que la selección ya no es completa.

Interacciones de apoyo

Cuando usamos un checkbox para que el usuario marque una opción, a veces es útil ofrecer información extra para que entienda mejor qué está aceptando o seleccionando. Para esto, podemos usar enlaces o iconos que abran diferentes tipos de ayudas: una pestaña nueva, un modal, un popover o un tooltip.

Te recomendamos seguir estas pautas para elegir la mejor forma de mostrar esa información:

• Si la información es legal y muy larga (por ejemplo, la Política de privacidad o contratos que hay que aceptar al marcar el checkbox), lo mejor es que el enlace abra una pestaña nueva. Así el usuario puede leerlo sin perder la página donde está.
• Si la información relacionada es extensa pero no legal (como detalles técnicos o explicaciones amplias sobre lo que se selecciona), también debería abrir una pestaña nueva.
• Si la información está relacionada con una promoción o descuento específico (por ejemplo, términos especiales de un descuento que se activa con ese checkbox), recomendamos mostrarla en un modal, que es una ventana emergente sobre la página.
• Si quieres dar información adicional corta que pueda interesar al usuario (como una breve descripción, fases de una actividad o recomendaciones), lo ideal es usar un tooltip o un popover, que son pequeños mensajes que aparecen al pasar el cursor o hacer clic en un icono.
• Si se trata de dar feedback sobre el estado de un proceso o formulario relacionado con el checkbox (por ejemplo, mensajes como “Pendiente de validar” o “Válido hasta tal fecha”), es mejor usar un tooltip para que el mensaje aparezca justo al lado del checkbox.