Dropdown

Son listas de opciones donde se puede seleccionar una o varias de ellas. Una opción seleccionada puede representar un valor en un formulario, o puede utilizarse como una acción para filtrar contenido.

Racional de aplicación

Los Dropdowns pueden utilizarse en formularios de páginas completas, en modales o en paneles laterales. El componente Dropdown se utiliza para seleccionar, filtrar u ordenar contenidos en una página.

No utilizamos un Dropdown para selecciones binarias, ya que para ese caso consideramos mejor opción los Radio Button.

No anidamos los Dropdown ni los utilizamos para mostrar información demasiado compleja. Se debe mantener la selección de opciones lo más sencilla posible.

Consideramos la posibilidad de utilizar un menú desplegable de selección si la mayor parte de la experiencia se basa en formularios o se utiliza con frecuencia en plataformas móviles. La selección nativa funciona mejor con un formulario nativo cuando se envían datos y también es más fácil de usar en una plataforma móvil.

Buenas prácticas

Uso correcto	Uso incorrecto
Acompañamos al selector de entrada con una etiqueta que informe del contexto de la selección.	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
Puede ser mejor opción para una selección binaria un grupo de radio buttons.	Para selecciones de dos elementos y según el contexto, el Dropdown puede no ser la mejor opción.

Interacción

Este componente ha sido validado para cumplir con las pautas de accesibilidad WCAG 2.1 AA, sin embargo los cambios realizados por el propietario del contenido pueden afectar el cumplimiento de la accesibilidad. Hay que asegurarse de revisar y seguir las instrucciones de esta sección cuando se actualice o se agregue contenido nuevo a este componente.

Dispositivo	Interacción
Ratón	Se puede activar un Dropdown haciendo clic en cualquier lugar dentro del contenedor del Dropdown.
Teclado	Se puede activar un Dropdown presionando Intro o Espacio mientras el Dropdown está enfocado.

Anatomía y variabilidad

Anatomía del componente

Letra	Elemento	Descripción
A	Etiqueta	Se aconseja que los Dropdown vayan acompañados de una etiqueta.
B	Texto de ayuda	Brinda un contexto adicional o instrucciones sobre el selector que se va a utilizar.
C	Selector de entrada	Muestra un texto de contexto (Placeholder) o la última opción seleccionada.
D	Opción	Elemento disponible para ser seleccionado.
E	Opción seleccionada	Opción que ha sido seleccionada y se reflejará en el selector de entrada.

Variabilidad de estados

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

Instalación

npm i --save @plural-wc/dropdown
// or
yarn add @plural-wc/dropdown

import { PluralDropdown } from '@plural-wc/dropdown';
// or
import '@plural-wc/dropdown/plural-dropdown.js';

Uso

Default

export const defaultPreview = () => html`<plural-dropdown name="dropdown" label="Label">
  <plural-option .choiceValue=${''} hidden>Placeholder</plural-option>
  <plural-option .choiceValue=${'red'}>Red</plural-option>
  <plural-option .choiceValue=${'hotpink'}>Hotpink</plural-option>
  <plural-option .choiceValue=${'blue'}>Blue</plural-option>
</plural-dropdown>`;

Help-text

export const helpText = () => html`<plural-dropdown name="dropdown" label="Label">
  <plural-option .choiceValue=${''} hidden>Placeholder</plural-option>
  <plural-option .choiceValue=${'red'}>Red</plural-option>
  <plural-option .choiceValue=${'hotpink'}>Hotpink</plural-option>
  <plural-option .choiceValue=${'blue'}>Blue</plural-option>
  <p slot="help-text">Help-text</p>
</plural-dropdown>`;

Disabled

export const disabled = () => html`<plural-dropdown name="dropdown" label="Label" disabled>
  <plural-option .choiceValue=${''} hidden>Placeholder</plural-option>
</plural-dropdown>`;

Disabled & Feedback

export const disabledFeedback = () => html`<plural-dropdown name="dropdown" label="Label" disabled>
  <plural-option .choiceValue=${''} hidden>Placeholder</plural-option>
  <p slot="feedback">Feedback</p>
</plural-dropdown>`;

Feedback

export const feedback = () => html`<plural-dropdown name="dropdown" label="Label">
  <plural-option .choiceValue=${''} hidden>Placeholder</plural-option>
  <plural-option .choiceValue=${'red'}>Red</plural-option>
  <plural-option .choiceValue=${'hotpink'}>Hotpink</plural-option>
  <plural-option .choiceValue=${'blue'}>Blue</plural-option>
  <p slot="feedback">Feedback</p>
</plural-dropdown>`;

Intercept the checked item index or the value when selected item is changed

export const intercept = () => html`<plural-dropdown
  name="dropdown"
  label="Label"
  @model-value-changed=${({ target }) => {
    console.log(`updated value: ${target.modelValue}`);
    console.log(`checked index: ${target.checkedIndex}`);
  }}
>
  <plural-option .choiceValue=${''} hidden>Placeholder</plural-option>
  <plural-option .choiceValue=${'red'}>Red</plural-option>
  <plural-option .choiceValue=${'hotpink'} checked>Hotpink</plural-option>
  <plural-option .choiceValue=${'blue'}>Blue</plural-option>
</plural-dropdown>`;