--- boost: 0 sitemap: noindex: true title: Code de la Liste déroulante shortTitle: Code de la Liste déroulante description: Mise à disposition des extraits de code, de l’API et de la documentation technique du composant Liste déroulante. shortDescription: Sélectionner une option dans une liste. keywords: liste déroulante, select, formulaire, interface, sélection, interaction, design system, UX, UI, accessibilité, boutons radio, cases à cocher cover: ../_asset/cover/cover.png excerpt: La liste déroulante est un composant d’interface utile pour choisir un seul élément parmi plusieurs dans un espace restreint. Elle est recommandée entre 6 et 15 options. summary: Ce contenu décrit l’usage du composant liste déroulante, conçu pour permettre à l’usager de sélectionner une seule option dans une liste lorsque l’espace est contraint. Il explique dans quels cas l’utiliser ou non, en comparaison avec les boutons radio ou les cases à cocher, selon le nombre de choix proposés. Des recommandations sont également données pour bien contextualiser son usage dans une interface et suivre les règles éditoriales adaptées. Ce guide s’adresse aux concepteurs d’interfaces soucieux de l’ergonomie et de la compréhension utilisateur. mesh: - component/search - component/radio - component/checkbox --- ## Liste déroulante La liste déroulante est un élément d’interaction avec l’interface permettant à l’usager de choisir un élément dans une liste donnée. :::dsfr-doc-tab-navigation - [Présentation](../index.md) - [Démo](../demo/index.md) - [Design](../design/index.md) - Code - [Accessibilité](../accessibility/index.md) ::: ### HTML #### Structure du composant Le composant **Liste déroulante** permet à l'utilisateur de choisir une option parmi une liste déroulante. Sa structure est la suivante : - La liste déroulante doit être contenue dans un élément HTML `
` défini par la classe `fr-select-group`. - La liste déroulante est un élément HTML ``. - Un message d'erreur ou de succès peut être associé à la liste déroulante en utilisant un élément HTML `
` avec la classe `fr-messages-group` dans lequel on peut ajouter un message `fr-message`. - Son attribut `id` doit être associé à l'attribut `aria-describedby` de la liste déroulante. - Ce bloc peut être placé vide et être rempli dynamiquement, auquel cas il doit être annoncé à l'utilisateur en utilisant l'attribut `aria-live="polite"`. **Exemple de structure HTML simple** ```HTML
``` ### CSS #### Installation du CSS Pour fonctionner correctement le style CSS du composant et de ses dépendances doivent être importés. L'import doit se faire avant le contenu de la page dans la partie ``, et de préférence avec les fichiers minifiés, car plus légers. Il est possible d'importer les fichiers CSS avec un niveau de granularité adapté à vos besoins. Voir le découpage des fichiers CSS du DSFR dans la [documentation dédiée](path:/getting-started/developer/get-started#les-css). :::fr-table[Dépendances CSS]{valign=top scroll=false} | Dépendance | Obligatoire | |------------|-------------| | Core | Oui | | Form | Oui | | Select | Oui | ::: **Exemple d'imports CSS** ```HTML ``` #### Variantes d'états Les états d'erreur/succès/désactivé sont gérés au niveau du groupe. Pour ajouter un état à une liste déroulante, ajoutez une des classes suivantes : - La classe `fr-select-group--error` : Indique une erreur. - La classe `fr-select-group--valid` : Indique un succès. - L'attribut `fr-select-group--disabled` : Indique un état désactivé. Un message d'erreur ou de succès doit être ajouté dans un bloc `fr-messages-group` à la fin du groupe de la liste déroulante et doit être lié à la liste déroulante via un attribut `aria-describedby`. **Exemple de liste déroulante avec erreur** :::fr-accordion[Déplier pour voir le code]{id=code-select-erreur} ```HTML

Texte d’erreur obligatoire

``` ::: **Exemple de liste déroulante avec succès** :::fr-accordion[Déplier pour voir le code]{id=code-select-succes} ```HTML

Texte de validation

``` ::: **Exemple de liste déroulante désactivée** :::fr-accordion[Déplier pour voir le code]{id=code-select-disabled} ```HTML
``` ::: #### Variantes de liste déroulante avec groupe d'options L'élément HTML `` est utilisé pour regrouper les options associées dans une liste déroulante. Si vous disposez d’une longue liste d’options, les groupes d’options associées sont plus faciles à gérer pour un utilisateur. **Exemple de liste déroulante avec groupe d'options** :::fr-accordion[Déplier pour voir le code]{id=code-select-group} ```HTML
``` ::: --- ### JavaScript Le composant Liste déroulante **ne nécessite pas l'utilisation de JavaScript** pour son fonctionnement de base. --- ### Note de version [Voir les évolutions sur github](https://github.com/GouvernementFR/dsfr/pulls?q=is%3Apr+is%3Aclosed+is%3Amerged+select+)