Système de design GC Composants
Système de design GC Démarrer Aperçu des modèles de page Page de base Aperçu des composants Avis Barre de navigation latérale Barre de navigation supérieure Bascule de langue Bouton Boutons radio Carte Cases à cocher Champ de date Champ de saisie Chemin de navigation Conteneur Date de modification Détails En-tête Grille Icône Indicateur d'étape Jeu de champs Lien Masquage accessible Menu thématique Message d'erreur Pagination Pied de page Recherche Résumé des erreurs Signature Sélection Texte Titre Téléverseur de fichiers Zone de texte Aperçu des raccourcis CSS Réinitialisation des styles Mise en page réactive État Affichage Dimensionnement de la boîte Dimensionnement du conteneur Débordement Position Visibilité Alignement de texte Couleur de lien Couleur de texte Débordement de texte Décoration de texte de lien Famille de police Hauteur de ligne Police Saut de mot Style de liste Style de police Taille de lien Taille de police Transformation de texte Épaisseur de police Marge Marge intérieure Agencement de contenu Agencement des éléments Agencement individuel Alignement de contenu Alignement des éléments Alignement individuel Colonnes de grille Direction de l’élément flexible Dégagement Habillage de l’élément flexible Justification de contenu Justification des éléments Justification individuelle Lignes de grille Ordre Rétrécissement de l’élément flexible Élargissement de l’élément flexible Élément flexible Couleur de la bordure Couleur de l’arrière-plan Largeur de la bordure Rayon de la bordure Style de la bordure Image Noms des icônes Taille de l'icône Curseur Transition Événements de pointeur Aperçu des styles Unités de style Unités de style de couleur Unités de style d'espacement Unités de style typographie Contactez-nous Impliquez-vous Trouvez une démo

Groupe de boutons radio
<gcds-radio-group>

Ce composant est obsolète à partir de la version 0.35.0. Consultez les notes de publication v0.35.0 pour plus d'information.

Autres noms : radio button, radio.

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


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.
Structure du groupe de boutons radio accompagnée des étiquettes « Légende du jeu de champ », « Texte explicatif du jeu de champ », « Coche », « Libellé du bouton radio », « Bouton radio » et « Texte explicatif du bouton radio ».

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.

Aidez-nous à nous améliorer

Vous avez des questions ou des demandes? Faites-nous part de vos commentaires à l'aide de notre formulaire de contact.

Quelque chose ne va pas? Signalez-le sur GitHub en créant un compte. Vous pourrez accéder aux réponses de l'équipe, suivre les progrès réalisés concernant votre problèmes et voir les problèmes signalés par d'autres personnes.

Fournir des commentaires Signaler un problème sur GitHub
2024-12-11