Bouton radio
Le bouton radio permet à l’utilisateur de choisir une seule option dans une liste.
Exemple
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
Variantes disponibles
Le composant offre deux variantes selon les contraintes d’espace de l’interface :
- Format par défaut
- Format compact
Quand l’utiliser
Utiliser le bouton radio lorsqu’un seul choix est possible parmi un ensemble limité d’options (généralement entre 2 et 12).
Il est préférable à la liste déroulante lorsque le nombre d’options est faible, car toutes les possibilités sont visibles d’un seul coup d’œil.
Voici les indications pour choisir le bon composant selon le nombre d’options à afficher, afin d’assurer une bonne lisibilité et une expérience utilisateur optimale :
- Pour 2 à 5-7 options : afficher toutes les options.
- Pour 5-7 à 10-12 options : afficher un sous-ensemble (5-7), avec un bouton Afficher/Masquer pour afficher le reste.
- Au-delà de 10-12 options : utiliser une liste déroulante.
Format par défaut
Utiliser le format par défaut dans la majorité des cas, lorsque l’espace disponible permet un affichage confortable.
Format compact
Utiliser le format compact dans les interfaces denses ou en contexte de formulaire très serré, où l’espace horizontal ou vertical est restreint.
Quand ne pas l’utiliser
Si plus de 12 options sont nécessaires : utiliser une liste déroulante.
Si les options sont longues et que celles-ci sont bien connues du public cible (utiliser une liste déroulante avec boîte combinée).
Si plusieurs réponses sont permises (utiliser le composant Case à cocher).
Anatomie
- Libellé du groupe
- Groupe d’options
- Cercle de sélection
- Libellé d’option
- Bouton Afficher/Masquer
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Libellé du groupe
Doit être clair et précis. Il explique à l’utilisateur ce qu’il doit choisir.
Ajouter une astérisque si le champ est obligatoire. Pour plus de détails, consulter la fiche Indicateur de champ obligatoire.
Groupe d’options
Comporte un minimum de deux options.
Jusqu’à 5-7 options, toutes sont affichées. Au-delà, un bouton Afficher/Masquer permet d’afficher les choix restants.
Les options doivent être présentées dans un ordre logique, en mettant les plus probables en premier.
Les choix comme « Aucune de ces réponses », « Je ne sais pas » ou « Autre » sont à placer en dernier.
Libellé d’option
Le texte doit être court, compréhensible et autonome.
Bouton Afficher/Masquer
Ce lien apparaît automatiquement lorsque le nombre d’options affichables dépasse le seuil de 5-7. Il permet d’afficher ou masquer les options supplémentaires.
Gestion des erreurs
Un message d’erreur s’affiche sous le groupe si aucune option n’est sélectionnée à la validation. Le message doit être explicite, par exemple : « Vous devez sélectionner une option pour continuer ».
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans la trousse de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Groupe d’options
Positionnement et alignement : Aligné à gauche. Les boutons radio doivent être placés les uns en dessous des autres, et non côte à côte.
À faire
À ne pas faire
Cercle de sélection
Dimensions : 24 par 24 px (format par défaut), 16 par 16 px (format compact).
Bouton Afficher/Masquer
Positionnement et alignement : Sous la dernière option visible.
Message d’erreur
Positionnement et alignement : Sous le groupe de boutons radio ou sous le bouton Afficher/Masquer, si ce dernier est présent. Voir la page « Message d’erreur » pour plus de détails.
Comportements
Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu’ils déclenchent.
Groupe d’options
Une seule option peut être active.
Aucune option ne peut être présélectionnée par défaut.
L’option « Autre » fait apparaître un champ texte, visible uniquement lorsque cette option est sélectionnée.
Cercle de sélection
Passe de vide à rempli lorsque activé.
Changer d’option désactive la précédente.
Bouton Afficher/Masquer
En cliquant, les options cachées s’affichent.
Peut se refermer pour cacher les éléments qui sont excédentaires.
Message d’erreur
S’affiche si aucune option n’est sélectionnée.
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Instructions sur l’interaction avec le composant via la souris :
- Cliquer sur le cercle ou le libellé pour sélectionner une option.
- Cliquer sur une autre option pour changer la sélection.
- Cliquer sur le bouton Afficher/Masquer pour afficher les choix supplémentaires.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Tab : entrer dans le groupe.
- Flèches haut/bas : naviguer entre les options.
- Barre d’espace : sélectionner l’option en focus.
- Entrée : activer le bouton Afficher/Masquer.
- Échap : refermer les options (si applicable).
- En cas d’erreur bloquante, le focus est dirigé vers le message.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 15 janvier 2026