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.
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.
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. |
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. |
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. |
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. |
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';
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>`;
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>`;
export const disabled = () => html`<plural-dropdown name="dropdown" label="Label" disabled>
<plural-option .choiceValue=${''} hidden>Placeholder</plural-option>
</plural-dropdown>`;
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>`;
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>`;
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>`;
Última actualización 1yr ago