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
1
npm i --save @plural-wc/dropdown
2
// or
3
yarn add @plural-wc/dropdown
Copied!
1
import { PluralDropdown } from '@plural-wc/dropdown';
2
// or
3
import '@plural-wc/dropdown/plural-dropdown.js';
Copied!
Uso
Default
1
export const defaultPreview = () => html`<plural-dropdown name="dropdown" label="Label">
2
  <plural-option .choiceValue=${''} hidden>Placeholder</plural-option>
3
  <plural-option .choiceValue=${'red'}>Red</plural-option>
4
  <plural-option .choiceValue=${'hotpink'}>Hotpink</plural-option>
5
  <plural-option .choiceValue=${'blue'}>Blue</plural-option>
6
</plural-dropdown>`;
Copied!
Help-text
1
export const helpText = () => html`<plural-dropdown name="dropdown" label="Label">
2
  <plural-option .choiceValue=${''} hidden>Placeholder</plural-option>
3
  <plural-option .choiceValue=${'red'}>Red</plural-option>
4
  <plural-option .choiceValue=${'hotpink'}>Hotpink</plural-option>
5
  <plural-option .choiceValue=${'blue'}>Blue</plural-option>
6
  <p slot="help-text">Help-text</p>
7
</plural-dropdown>`;
Copied!
Disabled
1
export const disabled = () => html`<plural-dropdown name="dropdown" label="Label" disabled>
2
  <plural-option .choiceValue=${''} hidden>Placeholder</plural-option>
3
</plural-dropdown>`;
Copied!
Disabled & Feedback
1
export const disabledFeedback = () => html`<plural-dropdown name="dropdown" label="Label" disabled>
2
  <plural-option .choiceValue=${''} hidden>Placeholder</plural-option>
3
  <p slot="feedback">Feedback</p>
4
</plural-dropdown>`;
Copied!
Feedback
1
export const feedback = () => html`<plural-dropdown name="dropdown" label="Label">
2
  <plural-option .choiceValue=${''} hidden>Placeholder</plural-option>
3
  <plural-option .choiceValue=${'red'}>Red</plural-option>
4
  <plural-option .choiceValue=${'hotpink'}>Hotpink</plural-option>
5
  <plural-option .choiceValue=${'blue'}>Blue</plural-option>
6
  <p slot="feedback">Feedback</p>
7
</plural-dropdown>`;
Copied!
Intercept the checked item index or the value when selected item is changed
1
export const intercept = () => html`<plural-dropdown
2
  name="dropdown"
3
  label="Label"
4
  @model-value-changed=${({ target }) => {
5
    console.log(`updated value: ${target.modelValue}`);
6
    console.log(`checked index: ${target.checkedIndex}`);
7
  }}
8
>
9
  <plural-option .choiceValue=${''} hidden>Placeholder</plural-option>
10
  <plural-option .choiceValue=${'red'}>Red</plural-option>
11
  <plural-option .choiceValue=${'hotpink'} checked>Hotpink</plural-option>
12
  <plural-option .choiceValue=${'blue'}>Blue</plural-option>
13
</plural-dropdown>`;
Copied!