Composant · Formulaire

Dropdown

Stable

Liste déroulante de sélection d'une valeur unique parmi des options (pattern listbox). Le déclencheur affiche l'étiquette et la valeur courante ; la liste s'ouvre au clic et se referme au choix, sur Escape ou au clic extérieur.

Quand l'utiliser

Choisir une valeur parmi un ensemble court à moyen d'options mutuellement exclusives.
Quand un libellé persistant (« Produit : Forge ») aide à comprendre la sélection.
Pour la sélection multiple, utilisez MultiSelect ; pour le natif simple, Select.

Quand ne pas l'utiliser

Pour une liste d'actions (et non de valeurs) : utilisez Menu.
Pour deux ou trois choix visibles en permanence : préférez Radio ou ContentSwitcher.
Pour de très longues listes avec recherche : utilisez Combobox.

Avec valeur initiale

La prop value fixe la sélection de départ ; onselect remonte le choix.

Produit

Voir le code (Svelte)

<Dropdown
  label="Produit"
  value="forge"
  options={[{"label":"Forge","value":"forge"},{"label":"Entropic","value":"entropic"},{"label":"Graphify","value":"graphify"}]}
/>

Sélection initiale figée : forge

Placeholder et option désactivée

Sans value, le placeholder s'affiche. Une option peut être marquée disabled.

Forfait

Voir le code (Svelte)

<Dropdown
  label="Forfait"
  placeholder="Choisir un forfait"
  options={[{"label":"Découverte","value":"starter"},{"label":"Équipe","value":"team"},{"label":"Entreprise (bientôt)","value":"enterprise","disabled":true}]}
/>

L'option « Entreprise » est disabled et ne peut pas être choisie.

Anatomie

Conteneur (.st-dropdown) : enveloppe inline positionnée en relatif.
Déclencheur (.st-dropdown__button) : bouton affichant « label : valeur » et un chevron.
Liste (.st-dropdown__list, role="listbox") : panneau flottant des options.
Option (.st-dropdown__option, role="option") : bouton avec aria-selected.

Accessibilité

Le déclencheur porte aria-haspopup="listbox" et aria-expanded reflétant l'état.
La liste a role="listbox" avec aria-label ; chaque option a role="option".
L'option courante porte aria-selected="true".
Escape ferme la liste ; un clic en dehors la ferme aussi.
Les options désactivées ont aria-disabled="true" et ne sont pas sélectionnables.

Lignes directrices

À faire

Donner un label clair décrivant le type de valeur choisie.
Ordonner les options de façon prévisible (alphabétique ou fréquence).

À éviter

Y placer des actions (utilisez Menu pour cela).
Charger des dizaines d'options sans recherche : préférez Combobox.

API

Prop	Type	Défaut	Description
`label`	`string`	requis	Étiquette affichée et aria-label de la liste.
`options`	`DropdownOption[]`	requis	Options { label, value, disabled? }.
`value`	`string`	optionnel	Valeur sélectionnée initiale.
`placeholder`	`string`	`"Select"`	Texte affiché sans sélection.
`open`	`boolean`	`false`	Ouvre la liste à l'initialisation.
`onselect`	`(value: string) => void`	optionnel	Appelé avec la valeur choisie.
`class`	`string`	optionnel	Classe(s) sur le conteneur.
Autres attributs	`HTMLAttributes<HTMLDivElement>`	N/A	Propagés sur le <div> conteneur.

Tokens utilisés

--st-component-dropdown-background
--st-component-dropdown-border
--st-component-dropdown-radius
--st-component-dropdown-text
--st-component-dropdown-shadow
--st-component-dropdown-optionHoverBackground
--st-component-dropdown-selectedBackground
--st-component-dropdown-selectedText
--st-component-control-focusRing
--st-component-control-hoverBorder
--st-component-control-hoverBackground