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.

Demo en vivo

Mensaje de error

<fieldset style="width: 300px; max-width: 100%;">
  <div class="rds-mb-l03">
    <label for="dropdown" class="rds-dropdown__label">Empty</label>
    <div class="rds-dropdown__cnt">
      <select required id="dropdown" class="rds-dropdown">
        <option disabled hidden value selected>Elige una opción</option>
        <option>First option</option>
        <option>Second option</option>
        <option>A more large option with more text just to test</option>
      </select>
      <span class="rds-dropdown__arrow rds-icon-Arrow_down" aria-hidden="true"></span>
    </div>
  </div>
  <div class="rds-mb-l03">
    <label for="dropdown1" class="rds-dropdown__label">Filled</label>
    <div class="rds-dropdown__cnt">
      <select required id="dropdown1" class="rds-dropdown">
        <option disabled hidden value>Elige una opción</option>
        <option selected>First option</option>
        <option>Second option</option>
        <option>A more large option with more text just to test</option>
      </select>
      <span class="rds-dropdown__arrow rds-icon-Arrow_down" aria-hidden="true"></span>
    </div>
  </div>
  <div class="rds-mb-l03">
        <label for="dropdown2" class="rds-dropdown__label">Error</label>
    <div class="rds-dropdown__cnt">
      <select required id="dropdown2" class="rds-dropdown rds-dropdown--error">
        <option disabled hidden value selected>Elige una opción</option>
        <option>First option</option>
        <option>Second option</option>
        <option>A more large option with more text just to test</option>
      </select>
      <span class="rds-dropdown__arrow rds-icon-Arrow_down" aria-hidden="true"></span>
    </div>
    <p class="rds-dropdown__error">Mensaje de error</p>
  </div>
  <div class="rds-mb-l03">
    <label for="dropdown3" class="rds-dropdown__label rds-dropdown__label--disabled">Disabled</label>
    <div class="rds-dropdown__cnt">
      <select required id="dropdown3" class="rds-dropdown" disabled>
        <option disabled hidden value selected>Elige una opción</option>
        <option>First option</option>
        <option>Second option</option>
        <option>A more large option with more text just to test</option>
      </select>
      <span class="rds-dropdown__arrow rds-icon-Arrow_down" aria-hidden="true"></span>
    </div>
  </div>
</fieldset>

Text

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

Demo en vivo

<fieldset style="width: 300px; max-width: 100%;">
  <div class="rds-mb-l03">
    <div class="rds-dropdown__cnt">
      <select required id="dropdown" class="rds-dropdown rds-dropdown--text">
        <option disabled hidden value selected>Elige una opción</option>
        <option>First option</option>
        <option>Second option</option>
        <option>A more large option with more text just to test</option>
      </select>
      <span class="rds-dropdown__arrow rds-dropdown__arrow--text rds-icon-Arrow_down" aria-hidden="true"></span>
    </div>
  </div>
  <div class="rds-mb-l03">
    <div class="rds-dropdown__cnt">
      <select required id="dropdown1" class="rds-dropdown rds-dropdown--text">
        <option disabled hidden value>Elige una opción</option>
        <option selected>First option</option>
        <option>Second option</option>
        <option>A more large option with more text just to test</option>
      </select>
      <span class="rds-dropdown__arrow rds-dropdown__arrow--text rds-icon-Arrow_down" aria-hidden="true"></span>
    </div>
  </div>
  <div class="rds-mb-l03">
    <div class="rds-dropdown__cnt">
      <select required id="dropdown3" class="rds-dropdown rds-dropdown--text" disabled>
        <option disabled hidden value selected>Elige una opción</option>
        <option>First option</option>
        <option>Second option</option>
        <option>A more large option with more text just to test</option>
      </select>
      <span class="rds-dropdown__arrow rds-dropdown__arrow--text rds-icon-Arrow_down" aria-hidden="true"></span>
    </div>
  </div>
</fieldset>

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.

  • Hover
    Indica que es un elemento interactivo cuando el usuario hacer hover con su cursor.

  • 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.