Dernière mise à jour : 21 juillet 2025
Le bouton radio permet de sélectionner une seule réponse parmi une liste de deux à six options prédéterminées.
- Guide d'utilisation
- Design
Dans cette page
1. Utilisation
Principales règles
Le bouton radio est utilisé en groupe pour présenter deux à six options.
Une seule option parmi toutes celles listées dans un groupe peut être sélectionnée.
Variants possibles
Interactivité
- Le bouton radio et son libellé associé sont cliquables.
- Pour que le choix soit délibéré, aucune option n’est présélectionnée par défaut.
- Lorsqu’une option est sélectionnée, elle ne peut être désélectionnée en recliquant dessus.
- Pour modifier la sélection, une autre option doit être choisie dans le groupe.
- Aucun élément interactif, par exemple une infobulle ou un hyperlien, ne doit être intégré dans un libellé d’option.
2. Quand envisager autre chose
- Pour sélectionner plus d’une option parmi un choix allant jusqu’à six réponses simples et claires, on choisit la case à cocher.
- Lorsqu’une seule option doit être retenue parmi plus de six options courtes et précises, on utilise la liste déroulante.
- Si la réponse est unique à l’utilisateur ou l’utilisatrice ou pour ne pas limiter les options, on se sert du champ texte.
3. Rédaction UX
Règles spécifiques au bouton radio
Libellé principal
Le libellé principal est clair, concis et rédigé dans une forme positive.
Il commence par une majuscule.
- Il ne finit jamais par un deux-points et n’a pas de ponctuation finale.
- S’il s’agit d’une phrase complète ou interrogative, il peut exceptionnellement se terminer par un point ou un point d’interrogation.
Limite de caractères : 100, espaces incluses
Texte d'aide (optionnel)
Le texte d’aide fournit une information complémentaire pour bien comprendre le libellé principal et y répondre correctement.
Il ne comporte pas de limite de caractères, mais il doit être précis et le plus concis possible.
Il utilise un langage simple et inclusif.
Libellé d’option
Le libellé d’option est clair, précis et rédigé dans une forme positive.
Il commence toujours par une majuscule.
Il n’a pas de ponctuation finale.
- S’il s’agit d’une phrase complète, il peut exceptionnellement se terminer par un point.
Tous les libellés d’option d’un même groupe doivent suivre une structure grammaticale commune.
- Par exemple, ce sont tous des noms communs, des verbes à l’infinitif ou de courtes phrases.
Les options sont classées dans un ordre logique, soit du plus courant au moins courant, du plus simple au plus complexe ou par ordre alphabétique.
Limites de caractères :
- Bouton radio – Liste verticale : 75, espaces incluses
- Bouton radio – Liste horizontale : 14, espaces incluses
Texte descriptif (optionnel)
Le texte descriptif vient définir davantage un libellé d’option pour aider à sa compréhension.
Il est clair, précis et concis.
Il utilise un langage simple et inclusif.
Limite de caractères : 185, espaces incluses
Règles générales pour les formulaires
Au-delà des règles propres au composant, il importe aussi de considérer celles qui concernent l’ensemble d’un formulaire.
Éviter les termes techniques, sauf s’ils sont connus par les personnes qui utiliseront le formulaire, par exemple des gens de métier.
Déterminer si la question est obligatoire et l’indiquer en ajoutant un astérisque.
Si une information complémentaire doit être communiquée, tenir compte du contexte pour choisir ce qui convient le mieux entre le texte d’aide et l'infobulle.
1. Bouton radio – Liste verticale
Anatomie
2. Bouton radio – Liste horizontale
Anatomie
3. Astérisque et infobulle
Au niveau du libellé principal, deux éléments peuvent être ajoutés, soit :
- un astérisque (*) pour indiquer une question obligatoire ;
- une infobulle pour fournir une information complémentaire, mais non essentielle pour comprendre la question et y répondre.
Ces éléments peuvent être utilisés simultanément ou séparément selon les besoins d’information à communiquer. Les exemples ci-dessous illustrent leur emplacement pour les variants Liste verticale et Liste horizontale du bouton radio.
4. Texte d’aide et texte descriptif
Le texte d’aide se positionne sous le libellé principal, puisqu’il fournit des informations essentielles pour répondre à la question, par exemple choisir l’option qui correspond le plus à la réalité de l'utilisateur ou l'utilisatrice.
Le texte descriptif, lui, vient se placer sous le libellé d’option, puisqu’il est directement lié à ce dernier en y apportant une explication supplémentaire.
Bouton radio – Liste verticale
Bouton radio – Liste horizontale
Le variant Bouton radio – Liste horizontale présente des options courtes et simples à comprendre. C’est pourquoi l’utilisation de ces deux éléments textuels n'est pas recommandée.
Le texte d’aide est permis, mais plutôt que d’y avoir recours, il vaut mieux revoir le libellé principal pour qu’il soit simple et parlant en soi.
Pour ce qui est du texte descriptif, son utilisation est à éviter. Non seulement les options ne devraient pas avoir besoin d’explication additionnelle, mais l'ajout du texte descriptif vient briser la structure visuelle qui se veut épurée.
5. Message d’erreur
Avec les variants Liste verticale et Liste horizontale du bouton radio, le message d’erreur se place sous le libellé principal. S’il y a un texte d’aide, c’est sous celui-ci qu’on le positionnera.
6. Grille
Quel que soit le variant de bouton radio utilisé, il importe de respecter un certain spectre de longueur de ligne pour assurer une lisibilité optimale. Ces limites sont établies dans le composant selon les points de rupture de chaque taille d’écran.
7. États interactifs
Dépendamment si bouton radio est sélectionné ou non, différents états interactifs sont prévus pour celui-ci et son libellé d’option.
Bouton non sélectionné
Défaut
Survol
Désactivé
Focus
Bouton sélectionné
Sélectionné
Focus
Désactivé
