Links

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 1yr ago