Liste déroulante

قائمة منسدلةSelect

Stablesrc/dsm/components/select.tsx

Sélection d'une valeur unique parmi une liste, avec un déclencheur au style des champs de texte et un menu accessible au clavier. Les options peuvent être regroupées et porter une description secondaire. `NativeSelect` couvre les cas simples qui n'ont pas besoin de description ni de regroupement.

Import

import { Select } from "@/dsm/components/select";

Exemples

Simple

Une liste plate d'options avec un espace réservé.

LTR

Type de document demandé

Regroupée

Options réparties par région, avec description secondaire.

LTR

Commune de résidence

États

Invalide et désactivé.

LTR

Province

Veuillez choisir une province pour continuer.

Province

Déterminée automatiquement à partir de votre commune.

Liste native

`NativeSelect`, un `<select>` stylé pour les cas simples.

LTR

Langue de correspondance

Usage

Quand l'utiliser

Utilisez `Select` dès que les options bénéficient d'un regroupement (par région, par catégorie) ou d'une description secondaire.
Utilisez `groups` pour structurer de longues listes, par exemple les communes classées par région.
Préférez `NativeSelect` sur un formulaire très dense où le comportement natif du système (clavier, autocomplétion) est suffisant.

Quand ne pas l'utiliser

N'utilisez pas `Select` pour moins de 5 options mutuellement exclusives affichées en permanence : `RadioGroup` évite un clic supplémentaire.
N'utilisez pas `Select` pour une sélection multiple : ce composant ne gère qu'une valeur à la fois.

Accessibilité & langues

Accessibilité

Le déclencheur est un vrai `<button>` : il est focusable au clavier et s'ouvre avec Entrée, Espace ou les flèches.
L'option sélectionnée est annoncée avec l'indicateur `Check`, jamais par la seule couleur.
Toujours envelopper `Select` dans `Field` pour lui fournir un libellé accessible.

RTL & multilingue

Le chevron et l'alignement du texte suivent le sens de lecture (`text-start`), sans classe additionnelle.
Le menu s'ouvre et s'aligne sur la largeur du déclencheur quel que soit le sens de lecture.

Propriétés

Select

Propriété	Type	Défaut	Description
options	{ value, label, description?, disabled? }[]	—	Liste plate d'options.
groups	{ label, options }[]	—	Options regroupées sous un intertitre ; remplace `options`.
placeholder	string	t.selectPlaceholder	Texte affiché tant qu'aucune valeur n'est choisie.
value / defaultValue / onValueChange	string \| null	—	Contrôle ou observe la valeur sélectionnée.
size	"sm" \| "md" \| "lg"	md	Hauteur du déclencheur, alignée sur `Input`.
invalid	boolean	—	Applique le style d'erreur au déclencheur.

NativeSelect

Propriété	Type	Défaut	Description
options*	{ value, label, disabled? }[]	—	Options du `<select>` natif.
placeholder	string	—	Ajoute une option désactivée initiale.
invalid	boolean	—	Applique le style d'erreur.