Liste déroulante

Le champ liste déroulante

C'est l'élément select qui est la base de toute liste déroulante.

Par défaut

Elle se compose d'une liste de option contenues dans le select. Celui-ci doit obligatoirement comporter un label.

Les différents états

Les champs de saisie permettent à un utilisateur d'entrer du contenu et des données.

Champ obligatoire

Ajoutez un astérisque au label pour informer qu’un élément est obligatoire (en précisant en haut ou en bas du formulaire que l'astérisque pointe les champs obligatoires). Si tous les éléments sont obligatoires, indiquez-le au début du formulaire.

Désactivé

L'attribut disabled rend impossible la sélection d'un option ainsi que le focus sur l'élément select, par exemple jusqu'à ce qu'une certaine condition ait été remplie (par exemple, qu'une action soit terminée comme cocher un checkbox).

Message

Un texte d’aide sous le label est une bonne pratique pour faciliter le choix de l’utilisateur. Il doit être affiché en-dessous.

Message d’erreur

Comme pour les autres éléments de formulaire, l'état d'erreur est matérialisé par l'ajout de la classe is-invalid sur le div englobant et le select. Cela colore en rouge les bordures et le texte. Les messages d’erreur doivent être explicites et des suggestions de correction doivent être apportées.