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’œ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, la composante case à cocher doit être utilisée. 

    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



    À ne pas faire



    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.

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

    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: 2px solid #223654;

     

    CSS du bouton radio - inactif
    border: 2px solid #c5cad2;

     

    CSS du bouton radio - focus
    border: 2px solid #4a98d9;

     

    Exemple


    CSS du bouton radio - pressé
    background-color: #1472bf;

    CSS du bouton radio - sélectionné
    background-color: #142bf;

     

    Dernière mise à jour : 30 août 2023

    Évaluation de page

    L’information sur cette page vous a-t-elle été utile?
    Avis général

    Des questions ou besoin de renseignements?

    Communiquez avec Services Québec