Tipos de desplegables
Desplegable sin borde
Se utilizan para componer organismos donde se establezcan múltiples desplegables dentro de un mismo contenedor. Al carecer de bordes visibles, se integran de manera más fluida en el diseño general.
Desplegable con borde
Se utilizan para entrar en secciones con jerarquías más importantes y suelen usarse junto con otros desplegables del mismo estilo para agrupar información de la misma temática. Este componente presenta un borde visible a su alrededor otorgándole un aspecto más distintivo y resaltado dentro del diseño.
Desplegable con ícono
El ícono utilizado puede ser una referencia visual para complementar el título del desplegable y así darle más información sobre el contexto a la persona usuaria.
Tamaños
Los desplegables pueden ser grandes, medianos o chicos. El tamaño mediano es la opción predeterminada y más utilizada.
Grande
Mediano
Chico
Diseño y estructura (contexto de uso)
Desplegable de selección única
Las opciones de selección única permiten a las personas usuarias elegir una opción a la vez. De manera predeterminada, el desplegable muestra el nombre de la lista que agrupa las opciones. Cuando la persona usuaria selecciona una opción de la lista, el desplegable se cierra y el texto de la opción seleccionada reemplaza el nombre de la lista.
Cuando el desplegable se encuentra expandido, cada opción debe tener la misma altura que el encabezado del componente.
Desplegable de selección múltiple
Las opciones de selección múltiple permiten a las personas usuarias seleccionar varias opciones para filtrar rápidamente el contenido que desean ver. Cada opción posee una casilla de verificación del lado izquierdo del texto. El desplegable permanece abierto mientras la persona usuaria selecciona las opciones. El componente se cierra si la persona hace clic en el encabezado del mismo o fuera del desplegable, dejando entre paréntesis la cantidad de ítems que fueron elegidos.
Contenidos de los desplegables
Se aconseja mantener los textos de los desplegables y de las opciones cortos y concisos. Los textos no deben ocupar más de una línea. El ancho máximo determinado para los desplegables es de 4 (cuatro) columnas.
El tamaño del desplegable se adaptará a la cantidad de caracteres que contenga el mismo. En caso de no poder resumir la información, superando esta el ancho máximo de 4 columnas, se truncará el texto cortando la última palabra y agregando tres (3) puntos que denoten la continuidad de dicha información.
Con información adaptable
Con información que supera las 4 columnas
Desplegables combinables
Los desplegables se agrupan en una disposición horizontal y pueden combinarse con Botones y Navegación en esa misma dirección. Utilizar un tamaño uniforme al combinar los desplegables con otros componentes, le brinda más flexibilidad y estructura al diseño. Por ejemplo, si utiliza un desplegable mediano, también deberá utilizar botones del mismo tamaño.
