Communications numériques gouvernementales Beta

Système de design gouvernemental

Bouton radio

Le bouton radio, ou case d’option, permet à l’utilisateur de choisir une seule option dans une liste.

Exemple


Quand l'utiliser

La composante s’utilise principalement dans les formulaires lorsqu’un seul choix est requis. Elle permet à l’utilisateur de balayer toutes les options en un coup d’oeil, comparativement à la liste déroulante. Cette dernière s'utilise quand les options sont nombreuses (plus de 10). 

Cliquer sur un bouton radio a pour effet de décocher toute autre option précédemment sélectionnée dans la liste. 

Pour permettre à l’utilisateur de choisir plusieurs options, utilisez la composante Case à cocher. 

Comment l’utiliser

On utilise le bouton radio dans une liste de 2 à 10 options au maximum. Une liste concise est facilement comprise par l’utilisateur. À l’inverse, un trop grand nombre de choix augmente la charge cognitive et le temps de décision. 

Concernant le positionnement des éléments, assurez-vous de respecter ces critères :

  • Les boutons radios doivent être placés les uns en dessous des autres, et non côte à côte.
  • Le libellé du bouton radio est toujours placé à droite de l’élément, et le bouton est aligné à la gauche de la page. 
  • La liste présente en premier les options les plus susceptibles d’être choisies.

Les options « Aucune de ces réponses », « Je ne sais pas » ou « Autre » doivent toujours être placées en dernier. Si l’option « Autre » est offerte, elle doit être accompagnée d’un champ texte pour préciser la nature du choix. 

Il est fortement recommandé de ne pas présélectionner d’options. Laissez les boutons radio vides pour que l’utilisateur comprenne qu’il n’a pas encore répondu à la question et pour éviter les erreurs potentielles.

À faire



À ne pas faire



Informations techniques

Dimensions du bouton radio

Les dimensions du bouton radio sont de 16 px de hauteur par 16 px de largeur. L’indicateur de sélection est de 10 px, avec un dégagement intérieur de 3 px chaque côté. 

Espacements

Il y a un espacement de 20 px entre le libellé de la question et chaque choix de réponse. 

Le bouton radio et le libellé sont cliquables. La zone a une hauteur de 32 px et une largeur variable selon la longueur du texte. Une marge de 8 px à gauche et à droite doit être ajoutée à la longueur totale.

États du bouton radio

Exemple


CSS du bouton radio - actif
Border : 1px solid #808a9d

 

CSS du bouton radio - inactif
Border : 1px solid #bfc4ce

 

CSS du bouton radio - focus
Border : 2px solid #5b6476

 

Exemple


CSS du bouton radio - pressé
Background-color : #1479cc

 

CSS du bouton radio - sélectionné
Background-color : #1479cc

 

Dernière mise à jour : 31 août 2020