Aller au contenu
SkillCodex
Menu

Segmented control

Contrôle segmenté

Un groupe visuellement joint d’options adjacentes qui sélectionne une valeur dans un petit ensemble.

Essayer le composant
Repères, sources et actions
Sources et révision
Mis à jour le
Version
v1.0.26 · r2
Sources
5 sources
Statut
Publié
Consulter les sources

Tu as peut-être cherché : trois boutons joints pour jour semaine moischoisir un mode d'affichage compactune pilule divisée en plusieurs choix

Toutes les formulations
Enregistrer et partager

Reconnaître

Changer de vue ou révéler du contenu

Essayer

Faut-il changer de vue, choisir un mode compact ou révéler du contenu dans le flux ?

Contrôle segmenté

Contexte commun aux essais

Un espace projet révèle du contenu associé sur place tout en conservant la position de l'utilisateur dans la page.

Contrôle segmenté

Mission

Contrôle segmenté - Segmented control

Choisir Compact au pointeur, puis Dense avec les flèches et vérifier qu’une seule valeur reste sélectionnée.

Densité d'affichage
  • Brief.pdf
  • Budget.xlsx
  • Notes.txt

Résultat de l’essai

La densité Confortable est appliquée.

Étape 1 sur 3

Essayer

Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.

Comportement et cas limite
À observer
Une seule densité d’affichage est active. Le segment sélectionné et l’espacement du contenu restent synchronisés.
Cas limite
Quand les libellés ne tiennent plus sans être coupés, l’interface emploie un contrôle à valeur unique plus adapté, comme Select.

Ce que cet essai montre

Segmented control sélectionne une valeur ; Tabs sélectionne un panneau de contenu, tandis qu'Accordion développe ou replie des sections.

Lequel convient à ton besoin ?

Contrôle segmenté

Basculer entre quelques modes d'affichage compacts

Onglets

Regrouper quelques vues de même niveau

Quel composant utilises-tu ici ?
Différence et sources

Segmented control sélectionne une valeur ; Tabs sélectionne un panneau de contenu, tandis qu'Accordion développe ou replie des sections.

Consulter les sources

    Parties du spécimen

    Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.

    Libellé du groupe

    Un nom commun qui explique le choix représenté par le groupe.

    Position dans l’atlas

    Carte relationnelle

    Repère le chapitre, les concepts proches et la prochaine décision utile.

    • Chapitre

      Changer de vue ou révéler du contenu

      Contrôle segmenté appartient à ce groupe de concepts comparés.

    • Ne pas confondre

      Onglets

      Choisis Contrôle segmenté si le choix est une valeur, comme un tri ou une unité, qui change la façon d’afficher le même contenu. Choisis Onglets si chaque option affiche son propre panneau de contenu dans une zone commune.

      Comparer cette paire
    • Ne pas confondre

      Accordéon

      Choisis Contrôle segmenté si l’utilisateur bascule un réglage ou un mode d’affichage compact entre deux et cinq valeurs. Choisis Accordéon si l’utilisateur ouvre des sections de détail facultatives, comme une FAQ, et peut en laisser plusieurs ouvertes.

      Comparer cette paire
    • Prochaine étape

      Compare les concepts du chapitre avant de retenir une implémentation.

      Ouvrir le chapitre

    Avec tes mots

    Comprendre

    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

    Choisir

    À 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

    Comparer les concepts proches

    Checklist de vérification

    Essaie ces gestes dans le lab, puis vérifie les mêmes comportements dans le résultat de ton agent. Adapte les noms d’exemple à ton interface.

    1. 1. À faire

      Choisis un segment, puis un autre, et examine la valeur ou le mode d’affichage commandé.

      Résultat attendu

      Une seule valeur est sélectionnée à la fois, et le résultat visible correspond à cette valeur.

    2. 2. À faire

      Atteins le groupe avec Tab et change le choix avec les flèches.

      Résultat attendu

      Le groupe a un nom clair, la sélection fonctionne au clavier et le focus se distingue de l’état sélectionné.

    3. 3. À faire

      Réduis la largeur de la fenêtre et essaie l’option au libellé le plus long.

      Résultat attendu

      Chaque option reste lisible et accessible, ou une alternative compacte explicite conserve les mêmes choix.

    Contrat complet
    1. 1Le contrôle représente une valeur, pas des panneaux
    2. 2Tous les libellés restent courts et lisibles
    3. 3Le focus et la sélection sont distincts
    4. 4La mise en page compacte a une adaptation mobile explicite

    Comprendre → Reconnaître → Choisir → Comparer

    Pack pour ton agent

    Instructions pré-écrites à coller dans ton agent. Copier n’exécute rien.

    Implémenter correctement

    Construis Contrôle segmenté sans casser son comportement

    # Implémenter Contrôle segmenté dans ton agent
    
    ## Objectif
    Implémente Contrôle segmenté pour ce comportement vérifié : Un groupe visuellement joint d’options adjacentes qui sélectionne une valeur dans un petit ensemble.
    
    ## Prérequis
    - Inspecte d’abord le dépôt, le design system et les tests existants.
    - Préserve les changements sans rapport et borne les fichiers modifiés.
    - Confirme que Contrôle segmenté répond au besoin avant de coder.
    
    ## Comportement requis
    - Sélectionner un élément désélectionne automatiquement le précédent dans le groupe nommé.
    - Les flèches parcourent les éléments liés selon leur orientation visuelle.
    
    ## États à couvrir
    - Densité Confortable sélectionnée
    - Densité Compact sélectionnée
    - Densité Dense sélectionnée
    
    ## Accessibilité
    - Rôle ARIA : radiogroup > radio
    - Le contrôle principal ou la région nommée pour Contrôle segmenté 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.
    - Le groupe est un seul arrêt après sélection, avec un focus visible distinct de l’état sélectionné.
    - Sans objet : choisir un autre segment remplace la valeur sélectionnée.
    - Le nom du groupe, chaque option et l’état sélectionné sont exposés comme un choix à valeur unique.
    - Tab entre sur le segment sélectionné
    - Les flèches déplacent et sélectionnent
    - Espace sélectionne le segment focalisé
    
    ## Quand ne pas utiliser
    - Chaque option révèle un panneau de contenu important
    - Les libellés sont longs ou les valeurs trop nombreuses
    
    ## Critères d’acceptation
    - Le contrôle représente une valeur, pas des panneaux
    - Tous les libellés restent courts et lisibles
    - Le focus et la sélection sont distincts
    - La mise en page compacte a une adaptation mobile explicite
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • Web platform
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le besoin est relié au comportement canonique avant toute décision technique.
    • Les états, l’accessibilité et les non-objectifs empêchent une implémentation seulement visuelle.
    • Les critères d’acceptation et le format de sortie rendent la vérification observable.

    À essayer ensuite

    Vérifie Contrôle segmenté sur un parcours réel

    # Vérifier Contrôle segmenté après l’implémentation
    
    ## Objectif
    Audite l’implémentation de Contrôle segmenté au regard de son comportement, de ses états et de ses exigences d’accessibilité sans la modifier automatiquement.
    
    ## Contrôles
    - Rejoue le plus petit parcours représentatif.
    - Contrôle le clavier, le focus, le nom accessible et les annonces.
    - Relie chaque écart à un critère d’acceptation précis.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:3e28cda2905fa73b495ea9b287035efd13b43b73b453eafa6a0b2ab9377f51c5

    Diagnostiquer un problème

    Trouve et corrige le défaut de Contrôle segmenté

    # Déboguer Contrôle segmenté dans ton agent
    
    ## Symptôme observé
    [DÉCRIS ICI LE SYMPTÔME]
    
    ## Contrôles observables
    - Reproduis le problème avec le plus petit parcours pertinent.
    - Compare le comportement aux états et transitions documentés de Contrôle segmenté.
    - Vérifie le clavier, le focus, le nom accessible et les annonces.
    
    ## Causes possibles
    - La primitive employée ne correspond pas au comportement attendu.
    - Un état, une transition ou un retour de focus manque.
    - Le composant voisin capture un événement ou masque un signal accessible.
    
    ## Corrections bornées
    - Corrige la cause reproduite sans recréer les composants voisins.
    - Conserve le contrat public et ajoute un test ciblé de non-régression.
    - N’installe aucune dépendance et ne modifie aucun état distant sans autorisation.
    
    ## Vérification finale
    - Le contrôle représente une valeur, pas des panneaux
    - Tous les libellés restent courts et lisibles
    - Le focus et la sélection sont distincts
    - La mise en page compacte a une adaptation mobile explicite
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • Web platform
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le symptôme explicite évite de partir d’une correction supposée.
    • Les contrôles séparent comportement, accessibilité et interférences voisines.
    • La correction reste bornée et doit produire une preuve de non-régression.

    À essayer ensuite

    Verrouille la correction de Contrôle segmenté

    # Empêcher la régression de Contrôle segmenté
    
    ## Objectif
    Transforme la cause reproduite en test de non-régression ciblé et compare Contrôle segmenté aux concepts voisins avant d’élargir la correction.
    
    ## Contrôles
    - Prouve que le test échoue avant la correction.
    - Prouve qu’il passe après la correction bornée.
    - Vérifie qu’aucun composant voisin n’a changé de comportement.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:ebe9db0970f9e7ee0669500a039c4cfc9c8c7dc34374360e2c4211d1141f232e

    Fiche complète, enregistrement et provenance

    Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.

    Digest du Pack: sha256:0dfa3687b8f99c51bec4840595578b4dcc29b1883165a198871f46117065d5e0

    Dans le code

    TechnologiePrimitiveVersionLimite
    Web platform

    fieldset with input[type=radio]

    NatifIl s’agit d’un choix à valeur unique. Si chaque segment révèle un panneau de contenu distinct, le modèle canonique est Tabs.

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

    • 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é Compact sélectionnée

      Densité Compact sélectionnée

    • Densité Dense sélectionnée

      Densité Dense sélectionnée

    Transitions d’état

    • Densité Confortable sélectionnée → Densité Compact sélectionnée

      Le pointeur ou le toucher sélectionne Compact et efface la valeur de densité précédente.

    • Densité Compact sélectionnée → Densité Dense sélectionnée

      La navigation par flèches sélectionne Dense et remplace la valeur Compact.

    • 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, Compact et Dense.
    Mission
    Choisir Compact au pointeur, puis Dense avec les flèches et vérifier qu’une seule valeur reste sélectionnée.
    État principal
    Une seule densité d’affichage est active. Le segment sélectionné et l’espacement du contenu restent synchronisés.
    Cas limite
    Quand les libellés ne tiennent plus sans être coupés, l’interface emploie un contrôle à valeur unique plus adapté, comme Select.

    Signaux visuels

    • Un petit ensemble d’options adjacentes de même hauteur
    • Un segment visiblement sélectionné
    • Bordure compacte ou fond commun

    Signaux comportementaux

    • Une seule valeur est active
    • La sélection efface la valeur précédente
    • Les flèches suivent le comportement radio

    Accessibilité

    Rôle
    radiogroup > radio
    Nom accessible
    Le contrôle principal ou la région nommée pour Contrôle segmenté 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 clavier
    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.
    Défilement
    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é

    Implémentations

    Ouvrir la matrice HTML, ARIA, Radix et shadcn
    • 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
      sourceId
      source-ui-html-input
      deprecationStatus
      active
      replacement
      Non applicable
      validFrom
      Non applicable
      validUntil
      Non applicable

      Limite d’équivalence : Il s’agit d’un choix à valeur unique. Si chaque segment révèle un panneau de contenu distinct, le modèle canonique est Tabs.

      Vérifier la source du binding

    Sources

    • WAI-ARIA APG: Radio Group Pattern
      sourceId
      source-ui-aria-radio-group
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/ARIA/apg/patterns/radio/
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-09T07:07:35Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:436a893f2f2f65f1f9c874321723e7c5360e580b980a5546e9eb562ee31b0dba
      status
      verified

      Affirmation couverte : Contrôle segmenté : guide APG informatif pour le modèle groupe radio : rôles, états, relations et interactions au clavier.

    • WHATWG HTML: The input element
      sourceId
      source-ui-html-input
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/input.html#the-input-element
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:4699d26dbf428296b4b352b480b75c846a9a6b23cf3f124d6d6fe6b5e19d4eba
      status
      verified

      Affirmation couverte : Contrôle segmenté : sémantique native normative, états, attributs et comportement du navigateur pour input.

    • WHATWG HTML: Forms
      sourceId
      source-ui-html-forms
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/forms.html
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:730c20c8a823ab6b9a40c77d4731d6aab46895cd98c388fe12c966096d5bdd18
      status
      verified

      Affirmation couverte : Contrôle segmenté : sémantique native normative, états, attributs et comportement du navigateur pour HTML form controls.

    • WCAG 2.2: Focus Appearance
      sourceId
      source-ui-wcag-understanding-focus-appearance
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:fdcf316a1f0e3cc758eda9618322d132862124ff0a3f3b1a3acbf20daf804ff0
      status
      verified

      Affirmation couverte : Contrôle segmenté : guide WCAG informatif pour évaluer l'apparence visible du focus clavier.

    • WAI-ARIA 1.2: Roles Model
      sourceId
      source-ui-wai-aria-roles
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#roles
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Affirmation couverte : Contrôle segmenté : définitions normatives des rôles ARIA et contraintes du rôle accessible indiqué.