Bouton radio

Dans cette page :

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

Exemple

Quand l'utiliser

Le composant s’utilise principalement dans les formulaires lorsqu’un seul choix est requis. Il permet à l’utilisateur de balayer toutes les options en un coup d’œil, 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.

Lorsque l’utilisateur doit choisir plusieurs options, le composant case à cocher doit être utilisé.

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, on doit s'assurer de respecter ces critères :

Les boutons radio 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. Les boutons radio doivent rester vides pour que l’utilisateur comprenne qu’il n’a pas encore répondu à la question et pour éviter les erreurs potentielles.

À faire

Exemple d'une bonne utilisation de la composante bouton radio.

À ne pas faire

Exemple d'une mauvaise utilisation de la composante bouton radio.

Informations techniques

Dimensions

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

Les dimensions du bouton radio au format compact 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

Par défaut, entre le libellé de la question et le premier choix de réponse, un espacement de 24 px est prévu. L’espacement entre chaque choix de réponse est de 16 px. Un espacement de 8 px est aussi présent entre les boutons et les choix de réponse.

Exemple des espacement entre les éléments dans la composante

Au format compact, entre le libellé de la question et chaque choix de réponse, un espacement de 16 px est prévu.

Espacements du bouton radio au format compact.

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.