Dropdown

Un dropdown es la forma compacta de mostrar múltiples opciones.

Los dropdown muestran una lista de opciones de la cual el usuario puede seleccionar un único elemento.

Variaciones y tipos

Diferenciamos dos tipos: Outlined y Text.

Outlined

El contenido se incluye en una caja.

Text

El dropdwon se presenta con una única linea de texto y sin caja.

Composición

El componente de dropdwon se compone de:

  • Labels y helper (opcional)
    Se trata de un texto que puede guiar al usuario para tomar una decisión fundamentada al hacer una selección.
  • Field
    Se mantiene cuando el dropdown está abierto o cerrado.
  • Opción
    Una lista de múltiples opciones para seleccionar desde dentro de un menú.
  • Input text
    Es el texto que el usuario ha introducido en el campo de texto. Se compone del propio texto y de un cursor, que indica la posición actual del texto en el campo.
  • Menu
    Se muestra como un estado desplegado y contiene una lista de opciones de las que seleccionar.

Estados

  • Empty
    Su estado por defecto.

  • Focus
    Comunica que el usuario ha seleccionado este elemento.

  • Active
    Estado en que se encuentra mientras sucede la interacción del usuario con el componente.

  • Filled
    Estado del componente una vez el usuario ha realizado la interacción.

  • Error
    Comunica al usuario que ha sucedido un error en la validación de los datos incluidos.

  • Disabled
    Estado en el que no puede ser modificado por los usuarios.

Usos

  • Se sugiere usar listas desplegables más que los botones de radio porque ahorran en altura vertical y crean una IU más limpia.
  • Se recomienda el uso de los Dropdowns cuando un usuario necesita elegir entre aproximadamente 7 a 15 opciones posibles y se tiene un espacio limitado para mostrar las opciones.
  • La lista de opciones debe ordenarse con un orden lógico, como alfabético, cronológico, orden de importancia, etc.

Alineación y orden

El contenedor del field debe alinearse verticalmente con el grid y con el resto de elementos que compongan la página.