Selects (Listes déroulantes)

Les listes déroulantes (<select>) proposent une liste d’options à l’utilisateur. Cette liste peut-être mono ou multi-choix. Pour des raisons ergonomiques, ce composant ne présente que la version mono-choix.

Usage

• Un select permet d’afficher un nombre illimité d’options dans une liste déroulante. L’utilisateur peut choisir une seule des options parmi cette liste.
• Il empêche les utilisateurs de saisir des données erronées et il permet de soulager votre temps de saisie au clavier.
• On le trouve généralement dans un formulaire.

Label

• Le composant "Label" indique le type d’information demandée sous celui-ci.
• Ses spécifications sont disponibles dans son doc design.
• Il est facultatif.
• En son absence, un pseudo-placeholder est nécessaire.

Conteneur

• Le conteneur est identique à celui du champ de texte.
• Il contient en plus un chevron à droite.

Pseudo-placeholder

• Le pseudo-placeholder permet de guider l’action de l’utilisateur.
• Ce n’est pas un attribut HTML (d’où son qualificatif de « pseudo »). Cependant, il est possible de le simuler.
• Il est facultatif.
• En son absence, un label est nécessaire.

Liste

• La liste permet de présenter différentes options.
• Elle s’affiche de manière native. La hauteur, le scroll, etc. sont définis selon chaque navigateur.
• Chaque élément est normé :
  • La 1^re lettre du texte est en majuscule, le reste est en minuscule.
  • Le contenu se limite à une seule ligne.
  • L’ordre est établi de manière logique : dans un ordre croissant ou selon la fréquence d’utilisation, etc.
• L’élément sélectionné remplace la value par défaut.

Cas spécifique

Select, hauteur 34px

• Par défaut, la hauteur d’un select est celle du text field : 44px. Cependant, un select de 34px de haut peut être utilisé dans des cas spécifiques et principalement sur Desktop.

Gestion des erreurs

• Les erreurs sont traitées comme celles du champ de texte.
• Si le champ est obligatoire, il est défini comme KO lorsqu’aucun choix n’a été fait.

Bonnes pratiques

• Si le nombre d’options est inférieur ou égale à 3, utiliser un bouton radio.
• Éviter les très longues listes nécessitant un scroll car les utilisateurs ne peuvent pas voir tous les choix d’un seul coup d’œil.
• Pour une quantité, le choix d’une année, utiliser un text field standard plutôt qu’un select car la saisie est plus rapide.
• Lors de la saisie d’une ville, ne pas utiliser un select. En France, la liste des communes évolue régulièrement et il est difficile de la maintenir à jour.
• Pour des raisons d’accessibilité, il est fortement recommandé de ne pas styler la liste d’options des selects.
• Le select est pris en charge par un clavier.
• Une des options de la liste peut être mise par défaut si elle est quasiment sûre d’être choisie.

Style & code

Standard

Liste déroulante standard avec la classes su-select. Pour les labels (obligatoires), prendre le composant Labels.

<label for="select1">Label</label>
<div class="su-select">
    <select id="select1" name="select1" required>
        <option value="" disabled selected hidden></option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
        <option value="option5">Option 5</option>
        <option value="option6">Option 6</option>
    </select>
</div>

Petit

Comme pour les boutons, il existe une version moins haute. Pour afficher cette version, de la même façon que pour les boutons, il faut ajouter la classe su-small à la classe de base su-select.

<div class="sipaui">
    <label for="select2">Label</label>
    <div class="su-select su-small">
        <select id="select2" name="select2" required>
            <option value="" disabled selected hidden></option>
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3">Option 3</option>
            <option value="option4">Option 4</option>
            <option value="option5">Option 5</option>
            <option value="option6">Option 6</option>
        </select>
    </div>
</div>

Préremplie

<label for="select3">Label</label>
<div class="su-select">
    <select id="select3" name="select3" required>
        <option value="option1" selected>Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
        <option value="option5">Option 5</option>
        <option value="option6">Option 6</option>
    </select>
</div>

Pseudo-Placeholder

Le pseudo-placeholder (qui simule le placeholder d’un champ texte) se fait en utilisant la première option à laquelle on n’aura pas mis de value. Comme pour le cas standard sans option affichée, l’attribut value doit quand même être présent pour ne pas casser la validation. Il faut lui mettre les attributs disabled, selected et hidden pour empêcher la sélection de cette option par l’utilisateur.

<label for="select4">Label</label>
<div class="su-select">
    <select id="select4" name="select4" required>
        <option value="" disabled selected hidden>Placeholder</option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
        <option value="option5">Option 5</option>
        <option value="option6">Option 6</option>
    </select>
</div>

Illustration :

<label for="select5">Label</label>
<div class="su-select">
    <select id="select5" name="select4">
        <!-- La valeur required est absente, ce qui entraîne un mauvais affichage du pseudo placeholder -->
        <option value="" disabled selected hidden>Placeholder</option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
        <option value="option5">Option 5</option>
        <option value="option6">Option 6</option>
    </select>
</div>

Suppression du label ?

Le pseudo-placeholder peut laisser penser que l’on peut se passer de label et passer l’information dans celui-ci. Mais ce pseudo-placeholder n’en étant pas un vrai, il implique quelques soucis : il est affiché dans les options sur Safari, mais pas sur Firefox ou Chrome et il a une couleur non spécifique si le select n’est pas required (ce qui fait qu’on peut le confondre avec un choix possible du select). De plus, l’absence de label pose des problèmes d’accessibilité pour les personnes à handicap visuel (un lecteur d’écran ne saura expliquer à l’utilisateur à quoi sert ce select) et des problèmes ergonomiques pour les autres (comment savoir à quoi sert ce select une fois qu’on a déjà choisi une option ?).

C’est pourquoi les labels sont obligatoires !

<h2>Illustration des problèmes cités ci-dessus, liés à l’absence de label</h2>
<p>Avec un select non <code>required</code>&nbsp;:</p>
<div class="su-select">
    <select id="select6" name="select6">
        <option value="" disabled selected hidden>Profession</option>
        <option value="option1">Sabotier</option>
        <option value="option2">Allumeur de réverbères</option>
        <option value="option3">Crieur</option>
    </select>
</div>
<p class="su-margin-top-m">Avec un choix déjà sélectionné&nbsp;:</p>
<div class="su-select">
    <select id="select6" name="select6">
        <option value="" disabled hidden>Profession</option>
        <option value="option1">Sabotier</option>
        <option value="option2">Allumeur de réverbères</option>
        <option value="option3" selected>Crieur</option>
    </select>
</div>

Erreur

Select standard en erreur. Pour pouvoir gérer les erreurs, chaque composant a besoin d’être inclus dans un parent qui portera la classe su-error si nécessaire. Cette classe, absente par défaut, sera positionnée par le développeur (soit en JS, soit par réponse serveur). Le message d’erreur sera identifié par la classe su-error-message. Ces 2 classes d’erreur sont issues du composant Errors.

<div class="su-error">
    <label for="select7">Label</label>
    <div class="su-select">
        <select id="select7" name="select7" required>
            <option value="" disabled selected hidden></option>
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3">Option 3</option>
            <option value="option4">Option 4</option>
            <option value="option5">Option 5</option>
            <option value="option6">Option 6</option>
        </select>
    </div>
    <div class="su-error-message">Message d’erreur</div>
</div>

Inactif

Liste déroulant inactive. Attention, si le disabled suffit à rendre le select inopérant, il faut une classe su-disabled sur le label et à côté du su-select pour changer son apparence. Cette classe est dépendante du composant Helpers.

<label for="select8" class="su-disabled">Label</label>
<div class="su-select">
    <select id="select8" name="select8" disabled class="su-disabled">
        <option value="" disabled selected hidden>Placeholder</option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
        <option value="option5">Option 5</option>
        <option value="option6">Option 6</option>
    </select>
</div>