Bouton radio

Le bouton radio est un élément d’interaction avec l’interface permettant à l’usager de réaliser un choix unique parmi plusieurs options.

Quand utiliser ce composant ?

Utiliser les boutons radio pour permettre à l’utilisateur de sélectionner une option unique dans une liste.

Si plusieurs choix sont possibles ou que la sélection n’est pas obligatoire, privilégiez le composant case à cocher.

Au-delà de 5 choix ou lorsque l’espace est restreint, utilisez pour une liste déroulante.

Comment utiliser ce composant ?

• Considérer toujours le bouton radio comme un groupe de boutons radio. Le bouton radio ne peut pas être utilisé seul, dans la mesure où il permet de faire un choix entre différentes options (minimum 2).

• Privilégier une disposition en liste verticale des boutons radio, une liste horizontale étant plus difficile à lire, notamment lorsque les options sont nombreuses.
• Éviter de sélectionner une option par défaut pour que le choix de l’usager soit conscient (en particulier si celui-ci est obligatoire).

Règles éditoriales

• Il est important de rédiger des libellés clairs et concis pour faciliter la compréhension des options et du choix à réaliser.
• Maintenir une cohérence dans les libellés des boutons radio en utilisant des termes logiques entre eux et cohérents avec le reste du site.
• Conserver une unité dans le format d’écriture de tous les libellés de boutons radio, en mettant uniquement la première lettre en majuscule et sans ponctuer la fin d’un libellé.
• Accompagner les boutons radio d’un texte d’aide pour clarifier la nature du contenu attendu lorsque nécessaire. Si cette information est essentielle, éviter de la masquer dans une infobulle.