# SegmentedControl

Un choix parmi quelques options voisines, toujours visibles, qui change l'affichage immédiatement.

## Playground

```html
<div class="feitio-segmented" role="group" aria-label="Période"><button type="button" aria-pressed="true">Jour</button><button type="button" aria-pressed="false">Nuit</button></div>
```

## Quand l'utiliser

-   Pour deux à quatre options courtes qui changent ce que la personne voit maintenant : jour et nuit, langue, 24 ou 12 heures, liste ou grille.

## Quand ne pas l'utiliser

-   **Pour un champ de formulaire** qui s'applique au sauvegarage : Radios.
-   **Pour naviguer entre les pages :** Nav.
-   **Plus de quatre options :** Select.

## Exemples

### Jour et nuit

Les boutons sont regroupés dans une seule boîte ; celui choisi est en encre.

Afficher le code

```html
<span class="feitio-segmented" role="group" aria-label="Luz">
  <button type="button" aria-pressed="true">Auto</button>
  <button type="button" aria-pressed="false">Dia</button>
  <button type="button" aria-pressed="false">Noite</button>
</span>
```

## Faire et ne pas faire

Do

Deux options courtes qui changent la vue immédiatement.

Don’t

Cinq options longues : la boîte déborde sur mobile. C'est un Select.

## Accessibilité

-   Un groupe nommé (`role="group"` et `aria-label`) ; chaque option est un bouton avec `aria-pressed`.
-   Le bouton mesure moins de 40px de hauteur, mais la zone tactile atteint 40.

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-segmented"`

sur le groupe

La boîte contenant les options.

`role="group"`, `aria-label`

obligatoire

Le nom du groupe, texte simple uniquement (pas de balises à l'intérieur).

`aria-pressed`

`"true"`, `"false"`

Quelle option est sélectionnée.