Bouton de sélection
Les boutons de sélection fonctionnent comme un bouton radio ou comme une case à cocher. La tuile entière est cliquable.
Exemple
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
Variantes disponibles
Le bouton de sélection peut être utilisé dans différentes variantes en fonction du type de réponse souhaitée. Il existe deux principales variantes :
- Avec bouton radio
- Avec case à cocher
Quand l’utiliser
Le composant est principalement utilisé dans les formulaires, lorsque les choix de réponse ont besoin d’être précisés. Il offre une surface plus importante, ce qui les rend plus visibles et accessibles en étant plus faciles à cliquer ou à taper.
Avec bouton radio
Lorsqu’un seul choix est possible dans un groupe d’options, elle doit comprendre un bouton radio.
Avec case à cocher
Lorsqu’il y a plus d’un choix de réponse possible dans un groupe d’options, elle doit comprendre une case à cocher.
Quand ne pas l’utiliser
Le bouton de sélection ne doit pas être utilisé lorsqu’un autre type de contrôle est plus approprié, comme un champ de texte ou un menu déroulant. Il n’est pas conseillé d’utiliser des boutons de sélection pour des choix complexes où une autre approche visuelle serait plus pertinente.
Anatomie
- Élément de contrôle (bouton radio ou case à cocher)
- Libellé
- Précision
- Zone cliquable
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Liste de boutons de sélection
On utilise le bouton de sélection dans une liste de deux options et plus.
On recommande de ne pas dépasser dix options. En effet, une liste concise est plus facilement comprise par l’utilisateur. À l’inverse, un trop grand nombre de choix augmente sa charge cognitive et son temps de décision.
Élément de contrôle
La présence de ces éléments de contrôle est essentielle afin de montrer qu’il s’agit d’un élément de formulaire cliquable.
Libellé et précision
En plus du libellé, une précision peut être ajoutée pour venir appuyer ce libellé.
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans la trousse de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Bouton de sélection (complet)
Positionnement et alignement : Quand les libellés sont très courts (trois à quatre mots ou moins), les boutons de sélection peuvent être placés côte à côte. Quand les libellés sont plus longs, ils sont généralement placés les uns en dessous des autres ou disposés en deux ou trois colonnes.
Dimensions : Il n’y a pas de largeur prédéfinie pour les boutons de sélection : elle varie en fonction de la zone de contenu dans laquelle se trouvent les boutons. Toutefois, tous les boutons de sélection d’une même question doivent avoir la même largeur. Leur hauteur est variable et dépend de la longueur de leur libellé et de la précision, qui peuvent être affichés sur plus d’une ligne. Si les boutons sont disposés en colonnes, tous les boutons disposés sur une même rangée doivent avoir la même hauteur.
Espacements : La marge entre les boutons de sélection est de 8 px, qu’ils soient disposés un en dessous de l’autre que côte à côte.
Élément de contrôle
Positionnement et alignement : Les éléments de contrôle (bouton radio ou case à cocher) sont toujours placés à gauche du libellé. Aucun élément ne devrait être placé entre le libellé et l’élément de contrôle (bouton radio ou case à cocher).
Dimensions : Les dimensions des éléments de contrôle sont les mêmes que celles des boutons radio et des cases à cocher.
Message d’erreur
Positionnement et alignement : Sous le groupe de boutons de sélection. Voir la page « Message d’erreur » pour plus de détails.
Comportements
Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu’ils déclenchent.
Bouton de sélection (complet)
Toute la zone cliquable du bouton de sélection est active. Cela signifie que l’utilisateur peut cliquer n’importe où sur la tuile, pas seulement sur l’élément de contrôle, pour activer la sélection.
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Instructions sur l’interaction avec le composant via la souris :
- Cliquer sur la zone cliquable pour sélectionner l’option.
- Cliquer sur la zone cliquable pour annuler la sélection (dans le cas d’un bouton avec case à cocher).
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Utiliser la touche Tab pour naviguer entre les options.
- Utiliser la barre d’espace pour sélectionner ou annuler une option (dans le cas d’un bouton avec case à cocher).
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 15 janvier 2026