# Select

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

## Playground

```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

### 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

Do

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.

## Accessibilité

-   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.
