Select

Une liste qui s'ouvre pour choisir une option parmi plusieurs.

Sur cette page

Playground

Répéter

Option vide

État

Fond

HTML

<div class="feitio-field"><label class="feitio-label" for="pg-s">Répéter</label><span class="feitio-select"><select id="pg-s"><option>Quotidien</option><option selected>Hebdomadaire</option><option>Mensuel</option></select><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-down"></use></svg></span></div>

Quand l'utiliser

Pour un choix parmi de nombreuses options (plus de six ou sept), la personne le sait déjà : une zone horaire, un pays.

Quand ne pas l'utiliser

Peu d'options : Radios ; tout reste visible.
Plusieurs choix : Case à cocher.
Pour naviguer : Navigation ou liens.

Exemples

Time zone

Zone horaire

Dans Chrome et Edge, la liste s'ouvre à l'intérieur de la page, comme du papier soulevé : elle apparaît lors du partage d'écran et suit le thème. Dans les autres cas, la liste du système s'ouvre, ce qui fonctionne de la même manière.

Afficher le code

HTML

<span class="feitio-select">
  <select id="fuso">
    <option value="">Escolha um fuso horário</option>
    <option>São Paulo (UTC−3)</option>
    …
  </select>
  <svg class="feitio-icon" aria-hidden="true">…</svg>
</span>

États

Aucun choix

Choix

Erreur

Pick a time zone

Désactivé

Aucun choix : lorsque aucune option ne permet d'établir un défaut raisonnable, la première ligne invite, en texte doux, et ne peut être soumise. Lorsqu'un défaut raisonnable existe, il est choisi.

Faire et ne pas faire

De nombreuses options connues : la liste économise l'espace.

Don’t

Trois options cachées dans une liste : avec Radios, elles s'adaptent à l'écran et nécessitent un seul clic.

Il reste un <select> : clavier, lecteur d'écran et mobile fonctionnent comme partout.

Attributs

Attribut	Valeurs	Pour quoi
`class="feitio-select"`	sur l'enveloppe `<span>`	Le cadre et la flèche dessinée.
`option value=""`	la première option	L'état « sans choix » ; ne peut pas être soumis.
`aria-invalid="true"`	avec une erreur	Ligne de vin.