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.
Avec vos mots
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
Essayer
Choix et états binaires
Comparer les trois comportements
Scénario comparatif partagé : Un parcours de réglages demande à l'utilisateur de faire un choix et de comprendre s'il est indépendant, exclusif ou appliqué immédiatement.
Ce contexte reste fixe. Changez de concept pour observer la mission, le cas limite et le spécimen propres à chaque comportement.
Groupe de boutons radio
Radio group permet exactement un choix ; les Checkbox sont indépendantes, tandis que Switch change un réglage immédiat marche ou arrêt.
Votre mission
Entrer dans le groupe avec Tab, choisir Express avec les flèches et vérifier que Standard est désélectionné.
Cas limite à vérifier
Lorsque le groupe obligatoire est intact, l'envoi focalise le groupe et explique qu'un mode doit être choisi.
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é.
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
- Choisir un mode de livraison parmi des alternatives visibles
- Répondre à une question aux choix exclusifs
À éviter quand
- Plusieurs réponses sont permises
- Le réglage doit s'appliquer immédiatement en marche ou arrêt
Comparer les concepts proches
Checkbox représente un choix indépendant qui peut attendre l'envoi ; Radio group impose un seul choix, tandis que Switch applique immédiatement un réglage marche ou arrêt.
Case à cocherSwitch applique un réglage immédiatement ; Checkbox enregistre généralement un choix pour un envoi ultérieur, et Radio group choisit une valeur parmi plusieurs.
InterrupteurBuild 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é.
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 est intact, l'envoi focalise le groupe et explique qu'un mode doit être choisi.
Accessibilité
- Role
- native fieldset and radio inputs
- 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 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.
- Scroll
- 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
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 : Native radio inputs and a legend provide the group name; styling must preserve the exclusive choice and keyboard model.
Vérifier la source du binding
Sources
- WAI-ARIA APG: Radio Group Pattern
W3C WAI · standard · 2026-07-16
Affirmation couverte : Radio group: radio group naming, exclusive selection, focus, and arrow-key interaction guidance.
- WHATWG HTML: The input element
WHATWG · standard · 2026-07-16
Affirmation couverte : Radio group: 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.