Tipos de colapsables
Colapsable predeterminado
Cuenta obligatoriamente con un título que describe el contenido que contiene el colapsable. El título debe ser claro, conciso y descriptivo para que la persona usuaria opte por revelar el contenido o no.
Esta es la descripción que se encuentra dentro de un colapsable. Recomendamos no utilizar demasiado texto, para generar una lectura óptima.
Colapsable con ícono, volanta y/o descripción
El uso de estas variables es opcional. Todas permiten añadir información relevante y reforzar la comprensión del contenido del colapsable.
Esta es la descripción que se encuentra dentro de un colapsable. Recomendamos no utilizar demasiado texto, para generar una lectura óptima.
Diseño y estructura (contexto de uso)
Color del colapsable
Los colapsables pueden ser de color gris o blanco dependiendo del contraste con el fondo del cuerpo, para garantizar la legibilidad y la accesibilidad de la información que contiene.
Esta es la descripción que se encuentra dentro de un colapsable. Recomendamos no utilizar demasiado texto, para generar una lectura óptima.
Esta es la descripción que se encuentra dentro de un colapsable. Recomendamos no utilizar demasiado texto, para generar una lectura óptima.
Colapsable de selección única
Este comportamiento del componente permite que haya un solo colapsable abierto a la vez. Al accionar otro colapsable del mismo grupo, automáticamente se cerrará el que estaba abierto.
Esta es la descripción que se encuentra dentro de un colapsable. Recomendamos no utilizar demasiado texto, para generar una lectura óptima.
Esta es la descripción que se encuentra dentro de un colapsable. Recomendamos no utilizar demasiado texto, para generar una lectura óptima.
Esta es la descripción que se encuentra dentro de un colapsable. Recomendamos no utilizar demasiado texto, para generar una lectura óptima.
Colapsable de selección múltiple
Este comportamiento permite que varios colapsables estén abiertos a la vez.
Esta es la descripción que se encuentra dentro de un colapsable. Recomendamos no utilizar demasiado texto, para generar una lectura óptima.
Esta es la descripción que se encuentra dentro de un colapsable. Recomendamos no utilizar demasiado texto, para generar una lectura óptima.
Esta es la descripción que se encuentra dentro de un colapsable. Recomendamos no utilizar demasiado texto, para generar una lectura óptima.
Colapsable con texto
Muestra texto plano, pudiendo ser uno o más párrafos; al ser contenido de texto es posible que tenga enlaces.
Esta es la descripción que se encuentra dentro de un colapsable. Recomendamos no utilizar demasiado texto, para generar una lectura óptima.
Colapsable con lista
El colapsable muestra el contenido en forma de lista. Cada ítem puede tener, además del título, una volanta, una descripción e íconos. También, pueden incorporarse botones interactivos como radios de selección única. En el caso de precisar íconos específicos para los ítems de las listas por fuera de las librerías de Material Icons Rounded y Boxicons, se pueden utilizar SVGs de 24x24px.
Usabilidad
Buenas prácticas
Utilizar colapsables para contenido que puede estar oculto para la persona usuaria o que es optativo, como casos particulares de un trámite o preguntas frecuentes.
Mantener títulos breves y claros. Es fundamental que el contenido del colapsable no sea complejo, lo que ayuda a las personas usuarias a decidir si desean expandirlo o no.
Malas prácticas
No combinar párrafos de texto e ítems de lista dentro de un mismo colapsable.
No utilizar un colapsable para información relevante que deba estar siempre visible.
No utilizar un colapsable del mismo color del fondo de la página. Para fondos grises utilizar colapsables blancos, y para fondo blanco utilizar colapsables grises.
No utilizar un colapsable cuando el contenido es poco e insuficiente. Los colapsables aumentan la carga cognitiva de las personas usuarias a la hora de decidir, por lo que si el contenido es corto, es mejor optar por una bajada de texto simple u otros componentes.
No incorporar contenido extenso dentro de los colapsables. Considerar simplificar el contenido, dividirlo en varias páginas, o mantenerlo en una sola página.
No utilizar un colapsable con lista si hay menos de 2 ítems. Considerar el uso de otros componentes, como un título con una bajada de texto simple.
No incorporar otros componentes dentro del colapsable. No incluir botones, accesos, listas o cualquier otro componente que no sean las variantes permitidas.
