Aller au contenu
SkillCodex
Menu

Radio group

Groupe de boutons radio

Un ensemble nommé de choix mutuellement exclusifs où sélectionner une option désélectionne la précédente.

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é : des choix ronds dont un seul peut être actifchoisir une vitesse de livraisonchoisir exactement une offre

Toutes les formulations
Enregistrer et partager

Reconnaître

Choix et états binaires

Essayer

S’agit-il d’une valeur indépendante, d’un choix exclusif groupé ou d’un réglage marche ou arrêt ?

Groupe de boutons radio

Contexte commun aux essais

Un parcours de réglages demande à l'utilisateur de faire un choix et de comprendre s’il est indépendant, exclusif ou exprime un réglage marche ou arrêt.

Groupe de boutons radio

Mission

Groupe de boutons radio - Radio group

Entrer dans le groupe avec Tab, choisir Express avec les flèches et vérifier que Standard est désélectionné.

Mode de livraison

Résultat de l’essai

Aucune livraison n'est encore choisie.

É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 option de livraison est cochée sous une légende visible commune.
Cas limite
Lorsque le groupe obligatoire n’est pas renseigné, l’envoi focalise le groupe et explique qu’un mode doit être choisi.

Ce que cet essai montre

Radio group permet exactement un choix ; les Checkbox sont indépendantes, tandis que Switch exprime un réglage marche ou arrêt.

Lequel convient à ton besoin ?

Groupe de boutons radio

Choisir un mode de livraison parmi des alternatives visibles

Case à cocher

Sélectionner un nombre libre d'options indépendantes

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

Radio group permet exactement un choix ; les Checkbox sont indépendantes, tandis que Switch exprime un réglage marche ou arrêt.

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

      Choix et états binaires

      Groupe de boutons radio appartient à ce groupe de concepts comparés.

    • Ne pas confondre

      Case à cocher

      Choisis Groupe de boutons radio si exactement une option doit être retenue parmi des alternatives visibles. Choisis Case à cocher si l’utilisateur peut cocher zéro, une ou plusieurs options.

      Comparer cette paire
    • Ne pas confondre

      Interrupteur

      Choisis Groupe de boutons radio si l’utilisateur choisit une option parmi plusieurs alternatives nommées, comme un mode de livraison. Choisis Interrupteur si la seule question est de savoir si un réglage est activé ou désactivé.

      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 radio, choix unique, groupe d'options

    • des choix ronds dont un seul peut être actif
    • choisir une vitesse de livraison
    • choisir exactement une offre
    • sélectionner une réponse dans un groupe visible
    • des options qui se désélectionnent entre elles
    • un choix unique avec toutes les alternatives visibles

    Choisir

    À utiliser quand

    • Choisir un mode de livraison parmi des alternatives visibles
    • Répondre à une question aux choix exclusifs

    À éviter quand

    • Plusieurs réponses sont permises
    • Le choix est mieux représenté comme un réglage marche ou arrêt

    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

      Atteins le groupe avec Tab, puis choisis une autre option avec les flèches.

      Résultat attendu

      Le focus et la sélection se déplacent dans le groupe nommé, et une seule option est sélectionnée.

    2. 2. À faire

      Clique sur le libellé d’une autre option, puis appuie sur Tab pour continuer.

      Résultat attendu

      Le choix précédent est désélectionné, le nouveau est sélectionné et Tab quitte le groupe pour le prochain élément.

    3. 3. À faire

      Pour un groupe obligatoire sans choix par défaut, valide avant de choisir, puis fais un choix.

      Résultat attendu

      L’erreur nomme le choix manquant, identifie son groupe et te permet de continuer en sélectionnant une option.

    Contrat complet
    1. 1Une légende visible nomme le choix global
    2. 2Une seule option peut être sélectionnée
    3. 3Les flèches suivent l'ordre visuel
    4. 4Les états obligatoire et erreur s'appliquent au groupe

    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 Groupe de boutons radio sans casser son comportement

    # Implémenter Groupe de boutons radio dans ton agent
    
    ## Objectif
    Implémente Groupe de boutons radio pour ce comportement vérifié : Un ensemble nommé de choix mutuellement exclusifs où sélectionner une option désélectionne la précédente.
    
    ## 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 Groupe de boutons radio 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
    - Livraison standard sélectionnée
    - Livraison express sélectionnée
    
    ## Accessibilité
    - Rôle ARIA : fieldset > input[type=radio]
    - Le contrôle principal ou la région nommée pour Groupe de boutons radio 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 natif se comporte comme un seul arrêt une fois une valeur choisie, avec un focus visible sur le bouton actif.
    - Sans objet : la sélection reste jusqu’au choix d’un autre bouton ou à la réinitialisation.
    - La légende nomme le groupe, et chaque bouton expose son libellé, son état coché, l’obligation et l’erreur.
    - Tab entre sur l’option choisie ou la première
    - Les flèches déplacent et sélectionnent
    - Maj+Tab quitte le groupe
    
    ## Quand ne pas utiliser
    - Plusieurs réponses sont permises
    - Le choix est mieux représenté comme un réglage marche ou arrêt
    
    ## Critères d’acceptation
    - Une légende visible nomme le choix global
    - Une seule option peut être sélectionnée
    - Les flèches suivent l’ordre visuel
    - Les états obligatoire et erreur s’appliquent au groupe
    
    ## 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 Groupe de boutons radio sur un parcours réel

    # Vérifier Groupe de boutons radio après l’implémentation
    
    ## Objectif
    Audite l’implémentation de Groupe de boutons radio 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:fa8c6be856a3a1316826b50d2c4f5c52110763f3bb8e1ae8ca70badfa4c3a26f

    Diagnostiquer un problème

    Trouve et corrige le défaut de Groupe de boutons radio

    # Déboguer Groupe de boutons radio 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 Groupe de boutons radio.
    - 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
    - Une légende visible nomme le choix global
    - Une seule option peut être sélectionnée
    - Les flèches suivent l’ordre visuel
    - Les états obligatoire et erreur s’appliquent au groupe
    
    ## 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 Groupe de boutons radio

    # Empêcher la régression de Groupe de boutons radio
    
    ## Objectif
    Transforme la cause reproduite en test de non-régression ciblé et compare Groupe de boutons radio 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:4250dff1d79140cdcaf97a7f43a5f71b835332792918f7def5dcaf71d81b3911

    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:8983edda9fb12fd3112022a867a0c5de2269ca651628a326d9840a31b8dddd2a

    Dans le code

    TechnologiePrimitiveVersionLimite
    Web platform

    fieldset with input[type=radio]

    NatifLes boutons radio natifs et une légende nomment le groupe ; le style doit préserver le choix exclusif et le comportement clavier.

    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

    • Livraison standard sélectionnée

      Livraison standard sélectionnée

    • Livraison express sélectionnée

      Livraison express sélectionnée

    Transitions d’état

    • Livraison standard sélectionnée → Livraison express sélectionnée

      La navigation par flèches ou l’activation directe sélectionne Express et désélectionne Standard.

    • Livraison express sélectionnée → Livraison standard sélectionnée

      La navigation par flèches ou l’activation directe sélectionne Standard et désélectionne Express.

    Scénarios de test

    Contexte
    Le paiement présente Standard, Express et Retrait sous une légende Mode de livraison.
    Mission
    Entrer dans le groupe avec Tab, choisir Express avec les flèches et vérifier que Standard est désélectionné.
    État principal
    Une option de livraison est cochée sous une légende visible commune.
    Cas limite
    Lorsque le groupe obligatoire n’est pas renseigné, l’envoi focalise le groupe et explique qu’un mode doit être choisi.

    Signaux visuels

    • Contrôles ronds sous une question commune
    • Toutes les alternatives visibles
    • Un seul indicateur rempli au maximum

    Signaux comportementaux

    • Sélectionner désélectionne l'autre
    • Les flèches parcourent et sélectionnent dans le groupe
    • Le groupe partage un nom accessible

    Accessibilité

    Rôle
    fieldset > input[type=radio]
    Nom accessible
    Le contrôle principal ou la région nommée pour Groupe de boutons radio 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 natif se comporte comme un seul arrêt une fois une valeur choisie, avec un focus visible sur le bouton actif.
    Fermeture
    Sans objet : la sélection reste jusqu'au choix d'un autre bouton ou à la réinitialisation.
    Défilement
    Le défilement de la page ne modifie pas la valeur. Le contrôle actif et tout message associé restent visibles au-dessus des régions fixes de l'interface.
    Annonce
    La légende nomme le groupe, et chaque bouton expose son libellé, son état coché, l'obligation et l'erreur.
    Clavier
    • Tab entre sur l'option choisie ou la première
    • Les flèches déplacent et sélectionnent
    • Maj+Tab quitte le groupe

    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 : Les boutons radio natifs et une légende nomment le groupe ; le style doit préserver le choix exclusif et le comportement clavier.

      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 : Groupe de boutons radio : 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 : Groupe de boutons radio : 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 : Groupe de boutons radio : 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 : Groupe de boutons radio : 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 : Groupe de boutons radio : définitions normatives des rôles ARIA et contraintes du rôle accessible indiqué.