SegmentedControl

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

Sur cette page

Playground

Options

Fond

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

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.

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.