Groupe de boutons radio
<gcds-radio-group>

Autres noms : radio button, radio.

Le groupe de boutons radio est un ensemble d’options permettant une sélection unique.

• GitHub
• Figma

Structure du groupe de boutons radio — avec jeu de champs

1. La légende du jeu de champ agit comme un titre pour discerner les boutons radio groupés. Le texte de la légende est aligné à gauche avec la première lettre en majuscule.
2. Le texte explicatif du jeu de champ précise les exigences spécifiques pour chaque regroupement de boutons radio afin de favoriser la réussite de la tâche.
3. Le bouton radio montre, par la présence ou l'absence de bouton coché, si une option a été sélectionnée ou pas.
4. Le bouton coché indique qu'une option a été sélectionnée.
5. Le libellé du bouton radio indique le choix que chaque bouton représente. Le libellé du texte a la première lettre en majuscule.
6. Le texte explicatif du bouton radio donne plus de renseignements sur le choix.

Accessibilité et design des boutons radio

Rendez les groupes de boutons radio visibles et les options claires

• Limitez le nombre d'options à 6 ou 7.
• Limitez le texte de chaque option à quelques mots ou à une courte phrase et ajoutez du texte explicatif pour plus de contexte.
• En règle générale, il est préférable de classer les options par ordre alphabétique. Dans certains cas, il peut être utile de classer les options de la plus commune à la moins commune.
• Lorsque possible, ajoutez une option telle que « Aucun » ou « Aucun des éléments ci-dessus » pour éviter de forcer une sélection inexacte. Si une personne sélectionne une option par accident dans un groupe de boutons radio, elle ne pourra pas la désélectionner ou annuler sa sélection.

Aidez les gens à comprendre comment utiliser les groupes de boutons radio

• Ne partez pas du principe qu’une personne saura utiliser un groupe de boutons radio.
• Utilisez le texte explicatif du jeu de champs pour indiquer aux personnes peu habituées aux groupes de boutons radio qu’elles ne peuvent choisir qu’une seule option. Par exemple, « Sélectionnez l’option la plus pertinente ».
• Évitez de présélectionner une option dans le groupe de boutons radio. Cela augmente le risque qu’une personne saute une question ou soumette une mauvaise réponse.