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.