Liste déroulante - Select

La liste déroulante permet à un utilisateur de choisir un élément dans une liste donnée.

 

Liste déroulante

La liste déroule fournit une liste d’option parmi laquelle l’utilisateur peut choisir. Seule la partie visible du composant est stylisé : la liste d’option déroulée conserve le style du navigateur.

Structure

La liste déroulante se compose des éléments suivants:

  • une liste, composée d’un ensemble d’options sélectionnables - obligatoire.

  • un label - obligatoire.

  • une description additionnelle- optionnelle

  • un message d’erreur ou de succès - obligatoire si un changement d'état doit être notifié à l’utilisateur.

 

1 2 3 4 5 6 7 8 9 10 <label class="fr-label" for="select"> Label pour liste déroulante </label> <select class="fr-select" id="select" name="select"> <option value="" selected disabled hidden>Selectionnez une option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> </select>

Note : les attributs disabled et hidden, permettent que l’option sélectionnée par défaut n’apparaisse pas dans la liste de choix. Vous pouvez selon vos besoins modifier ce comportement en supprimant des attributs.

État d'erreur

L'état d’erreur est signalé par un changement de couleur et par l’apparition d'un message d’erreur en-dessous du composant (cf. couleurs fonctionnelles : le rouge est la couleur de l’état erreur).

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <div class="fr-select-group fr-select-group--error"> <label class="fr-label" for="select-error"> Label pour liste déroulante </label> <select class="fr-select fr-select--error" aria-describedby="select-error-desc-error" id="select-error" name="select-error"> <option value="" selected disabled hidden>Selectionnez une option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> </select> <p id="select-error-desc-error" class="fr-error-text"> Texte d’erreur obligatoire </p> </div>

 

État de succès

L'état succès est signalé par un changement de couleur et par l’apparition d'un message de succès en-dessous du composant (cf. couleurs fonctionnelles : le vert est la couleur de l’état erreur).
Le message et le label sont liés par leurs attribut id et aria-describedby .

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <div class="fr-select-group fr-select-group--valid"> <label class="fr-label" for="select-valid"> Label pour liste déroulante </label> <select class="fr-select fr-select--valid" aria-describedby="select-valid-desc-valid" id="select-valid" name="select-valid"> <option value="" selected disabled hidden>Selectionnez une option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> </select> <p id="select-valid-desc-valid" class="fr-valid-text"> Texte de validation </p> </div>

 

État inactif

L'état inactif indique que utilisateur ne peut pas interagir avec l'élément.

 

 

Cet état peut être utilisée pour empêcher l'utilisateur d'interagir avec la liste jusqu'à ce qu'une autre action soit terminée.

1 2 3 4 5 6 7 8 9 10 <label class="fr-label" for="select-disabled"> Label pour liste déroulante </label> <select class="fr-select" disabled id="select-disabled" name="select-disabled"> <option value="" selected disabled hidden>Selectionnez une option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> </select>

Liste déroulante avec texte d’aide

Il est recommandé d’ajouter un texte d’aide sous le libellé afin de faciliter le choix de l’utilisateur. Il s’affiche sous le libellé du champ.

 

 

1 2 3 4 5 6 7 8 9 10 11 12 <div class="fr-select-group"> <label class="fr-label" for="select-hint">Label pour liste déroulante <span class="fr-hint-text">Texte de description additionnel</span> </label> <select class="fr-select" id="select-hint" name="select-hint"> <option value="" selected disabled hidden>Selectionnez une option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> </select> </div>

Règles d’utilisation

Usage

Les listes déroulantes sont à utiliser lorsqu'un utilisateur doit choisir entre 6 et 15 options possibles et que vous avez un espace limité pour afficher les options.
Éviter d’utiliser la liste déroulante lorsqu’elle comporte peu de proposition et privilégier dans ce cas les boutons radio , dont la compréhension est plus simple pour les utilisateurs.
Pour les choix multiples, il est conseillé d’utiliser des cases à cocher plus simples à utiliser que l’option multiple de la liste déroulante (nécessitant une combinaison avec la touche ctrl).

Ajoutez un astérisque au titre pour informer qu’un élément est obligatoire, avec une légende en haut ou en bas du formulaire. Si l’ensemble des éléments sont obligatoires, indiquez le au début du formulaire.

À noter, pour les autres éléments de formulaires, vous pouvez consulter les composants barre de recherche , bouton radio , champs de saisie , case à cocher

Accessibilité

Comme ce sont les mêmes règles qu’un champ <input>, voir la section correspondante.

Il est fortement recommandé de ne pas styliser la liste déroulante.

Contenu

Pour les titres (legend) et les libellés (label) :

  • Maintenir la cohérence : utilisez les mêmes termes à chaque fois et la même construction de phrase.

  • Utiliser un libellé clair et concis.

  • Mettre uniquement la première lettre du libellé en majuscule, n’utilisez pas de ponctuation à la fin d’un libellé.

  • Un texte d’aide clarifie la nature du contenu attendu - si ce texte est essentiel, il faut éviter de masquer ces informations dans un tooltip ou infobox.

L'ordre de la liste de sélection doit être fait selon la fréquence d'utilisation, du plus utilisé au moins utilisé.

Personnalisation

Le style de ce composant n’est pas personnalisable.
Toutefois, certains éléments sont optionnels - voir la structure du composant.

 

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :