Multiselect
Permite seleccionar varios elementos de una lista desplegable de opciones.

Racional de aplicación

El componente multiselección se puede utilizar cuando una entrada admite la combinación de varios valores en un solo campo de formulario con una lista desplegable de opciones disponibles para seleccionar.
Se debe tener en cuenta las siguientes consideraciones:
  • La selección debe tener una etiqueta breve y descriptiva encima que describa lo que se está cambiando al seleccionar una opción. La etiqueta no debe contener instrucciones y se reservan para el texto de ayuda.
  • Mejor no utilizar dos puntos finales y mejor evitar formular las etiquetas como preguntas.
  • Si hay más de 3 opciones, mostrar las opciones en orden alfabético u otro orden predecible para facilitar el "escaneo" visual.

Buenas prácticas

Uso correcto
Uso incorrecto
Acompañamos al selector de entrada con una etiqueta que especifique el contenido esperado.
Un selector de entrada sin etiqueta aporta poca información.
Procuramos que los nombres de las opciones del selector sean cortas.
Los nombres largos en las opciones pueden exceder el ancho del selector y producir comportamientos no deseados.

Interacción

Dispositivo
Interacción
Ratón
Se puede activar un Multiselect haciendo clic en cualquier lugar dentro del contenedor.
Teclado
Se puede utilizar el tabulador para desplazarse por los Multiselect de forma secuencial y desplegar las opciones utilizando la tecla Espacio.

Anatomía y variabilidad

Anatomía del componente

Letra
Elemento
Descripción
A
Etiqueta
Literal que determina la selección que se va realizar.
B
Placeholder
Es un texto predeterminado que puede utilizarse de ayuda o simulación de la información que se espera en el selector de entrada. Al elegir cualquier opción, desaparece para visualizar el resultado de la selección efectuada.
C
Icono de despliegue
Al hacer clic aquí expande y contrae el contenedor desplegable y muestra las opciones actualmente seleccionadas.
D
Texto de ayuda
Brinda un contexto adicional o instrucciones sobre lo que se debe ingresar en el campo.
E
Contendedor
Estructura que recubre el componente.
F
Desplegable
Contenedor que agrupa las opciones.
G
Casilla de verificación
Indica si la opción está seleccionada.

Variabilidad de estados

Letra
Estado
Descripción
A
Default
Estado por defecto, el selector está disponible para elegir la opción.
B
Hover
Visible al posicionar el cursor del ratón sobre el selector.
C
Active
Activado por ratón con click o tabulador para actuar sobre el mismo.
D
Filled
Visualización al seleccionar alguna de las opciones disponibles.
E
Disabled
Selector no disponible, normalmente atenuado visualmente.
Última actualización 8mo ago