Segmented control
Contrôle segmenté
Un groupe compact d'options adjacentes qui sélectionne une valeur et applique généralement le changement immédiatement.
Avec vos mots
Ce que les gens décrivent
Alias documentés : boutons segmentés, sélecteur groupé, bascule de vue
- trois boutons joints pour jour semaine mois
- choisir un mode d'affichage compact
- une pilule divisée en plusieurs choix
- changer la densité avec des options adjacentes
- un bouton sélectionné dans un groupe joint
- un petit contrôle pour la valeur grille ou liste
Essayer
Changer de vue ou révéler du contenu
Comparer les trois comportements
Scénario comparatif partagé : Un espace projet révèle du contenu associé sur place tout en conservant la position de l'utilisateur dans la page.
Ce contexte reste fixe. Changez de concept pour observer la mission, le cas limite et le spécimen propres à chaque comportement.
Contrôle segmenté
Segmented control sélectionne une valeur ; Tabs sélectionne un panneau de contenu, tandis qu'Accordion développe ou replie des sections.
Votre mission
Choisir Compacte au pointeur, puis Dense avec les flèches et vérifier qu'une seule valeur reste sélectionnée.
Cas limite à vérifier
À 320 px, les libellés restent sur une ligne ou le contrôle devient un Select plus adapté sans être coupé.
Mission
Contrôle segmenté - Segmented control
Choisir Compacte au pointeur, puis Dense avec les flèches et vérifier qu'une seule valeur reste sélectionnée.
- Brief.pdf
- Budget.xlsx
- Notes.txt
Parties du spécimen
Sélectionnez un repère directement sur le spécimen, ou utilisez la liste ci-dessous, pour afficher son rôle. Masquez les repères pour manipuler librement le labo.
Libellé du groupe
Un nom commun qui explique le choix représenté par le groupe.
À utiliser quand
- Basculer entre quelques modes d'affichage compacts
- Choisir une valeur courte avec tous les choix visibles
À éviter quand
- Chaque option révèle un panneau de contenu important
- Les libellés sont longs ou les valeurs trop nombreuses
Comparer les concepts proches
Tabs contrôle des panneaux de contenu ; Segmented control choisit une valeur, tandis qu'Accordion révèle des sections verticales sans remplacer un panneau commun.
OngletsAccordion révèle les sections sous leurs en-têtes ; Tabs remplace un panneau de même niveau, tandis que Segmented control choisit une valeur compacte.
AccordéonBuild pack
Transformer ce concept en prompt utile
Choisissez la tâche et la destination. Les noms techniques restent en anglais.
Détails techniques
Comportements
Garder un seul choix
Sélectionner un élément désélectionne automatiquement le précédent dans le groupe nommé.
Appliquer immédiatement
Le passage de marche à arrêt prend effet immédiatement, sans attendre l'envoi d'un formulaire.
Naviguer avec les flèches
Les flèches parcourent les éléments liés selon leur orientation visuelle.
États
Densité Confortable sélectionnée
Densité Confortable sélectionnée
Densité Compacte sélectionnée
Densité Compacte sélectionnée
Densité Dense sélectionnée
Densité Dense sélectionnée
Transitions d’état
Densité Confortable sélectionnée → Densité Compacte sélectionnée
Le pointeur ou le toucher active Compacte et met immédiatement à jour la densité du calendrier.
Densité Compacte sélectionnée → Densité Dense sélectionnée
La navigation par flèches sélectionne Dense et remplace immédiatement la valeur Compacte.
Densité Dense sélectionnée → Densité Confortable sélectionnée
L’activation de Confortable restaure la densité initiale du calendrier.
Scénarios de test
- Contexte
- Une barre de calendrier change sa densité entre Confortable, Compacte et Dense.
- Mission
- Choisir Compacte au pointeur, puis Dense avec les flèches et vérifier qu'une seule valeur reste sélectionnée.
- État principal
- Trois choix radio joints exposent Compacte comme valeur actuelle et changent immédiatement la densité.
- Cas limite
- À 320 px, les libellés restent sur une ligne ou le contrôle devient un Select plus adapté sans être coupé.
Accessibilité
- Role
- radiogroup with radio options
- Nom accessible
- Le contrôle principal ou la région nommée possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
- Focus
- Le groupe est un seul arrêt après sélection, avec un focus visible distinct de l'état sélectionné.
- Fermeture
- Sans objet : choisir un autre segment remplace la valeur sélectionnée.
- Scroll
- Le changement de vue active conserve une position stable dans la page. Le focus reste sur le contrôle et le contenu révélé ne provoque pas de saut inattendu.
- Annonce
- Le nom du groupe, chaque option et l'état sélectionné sont exposés comme un choix à valeur unique.
- Clavier
- Tab entre sur le segment sélectionné
- Les flèches déplacent et sélectionnent
- Espace sélectionne le segment focalisé
Bindings
fieldset with input[type=radio]
- implementationKind
- native
- nativeElement
- fieldset with input[type=radio]
- ariaPattern
- radiogroup
- radixPrimitive
- Non applicable
- shadcnRecipe
- Non applicable
- runtimeDependency
- Non applicable
- packageName
- Non applicable
- exportName
- Non applicable
- exactVersion
- Non applicable
- status
- verified
- verifiedAt
- 2026-07-16
- deprecationStatus
- active
- replacement
- Non applicable
- validFrom
- Non applicable
- validUntil
- Non applicable
Limite d’équivalence : This binding is a single-value control. If each segment reveals a distinct content panel, the canonical pattern is Tabs instead.
Vérifier la source du binding
Sources
- WAI-ARIA APG: Radio Group Pattern
W3C WAI · standard · 2026-07-16
Affirmation couverte : Segmented control: radio group naming, exclusive selection, focus, and arrow-key interaction guidance.
- WHATWG HTML: The input element
WHATWG · standard · 2026-07-16
Affirmation couverte : Segmented control: native input types, labeling, state, validation, and form participation.
Vérifié le 2026-07-16 · rev. 1
- Responsable
- SkillCodex Editorial
- Statut
- review
- Relecture
- Independent editorial review pending
- Prochaine revue
- 2026-10-16
- Publication
- Non publiée
- Historique
- Brouillon initial sourcé du MVP, en attente de relecture indépendante.