Bouton de sélection

Dans cette page :

Les boutons de sélection fonctionnent comme un bouton radio ou comme une case à cocher. La tuile entière est cliquable.

Exemple

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.

Lorsqu’un seul choix est possible dans un groupe d’options, il doit comprendre un bouton radio. Lorsqu’il y a plus d’un choix de réponse possible dans un groupe d’options, il doit comprendre une case à cocher. 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.

Exemple

Comment l'utiliser

On utilise le bouton de sélection dans une liste de 2 options et plus. On recommande de ne pas dépasser 10 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.

En plus du libellé, une précision peut être ajoutée pour venir appuyer ce libellé.

Pour ce qui est du positionnement des éléments, les critères suivants doivent être respectés :

Quand les libellés sont très courts (3 à 4 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;
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).

Exemple

Informations techniques

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 ligne doivent avoir la même hauteur.

Les dimensions des éléments de contrôle sont les mêmes que celles des boutons radio et des cases à cocher.

Libellé du bouton

Le libellé des boutons radio et des cases à cocher utilisés dans un bouton de sélection est plus gras que lorsque les boutons radio sont utilisés seuls.

Police de caractère : Open Sans
Taille : 16 px / 24 px
Graisse : semibold

Libellé de la précision

Police de caractère : Open Sans
Taille : 14 px / 20 px
Graisse : regular

Espacements et alignements

Le dégagement est de 16 px de tous les côtés.

Exemple

Indications de mesures pour les dégagements intérieurs.

L’élément de contrôle (bouton radio ou case à cocher) doit être aligné avec le haut du texte. Le contrôle ne peut pas être centré verticalement ni aligné avec le bas du texte du libellé.

À faire

Alignement de l'élément de contrôle avec le haut du texte.

À ne pas faire

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.

Exemple

Espacements entre les éléments disposés en grille.

États

État par défaut

HTML

<div class="btn-selection col">
<input class="input_radio-selection" id="nom-du-choix1" type="radio" name="nom-du-groupe" value="valeur-du-choix" />
<label class="btn-selection-label" for="nom-du-choix1">Version haute-fidélité
<span class="btn-selection-label-description">Pour les utilisateurs avancés. À utiliser uniquement si vous possédez un ordinateur ayant une mémoire vive de plus de 8 gigaoctets.
</span>
</label>
</div>

CSS

label
{
   font-family: Open Sans;
   font-size: 16px;
   font-weight: 600;
   line-height: 24px;
   position: relative;
   display: inline-block;
   box-sizing: border-box;
   width: 100%;
   padding: 16px 16px 16px 40px;
   cursor: pointer;
   transition: all .16s ease-in-out;
   color: #223654;
   border: 1px solid #c5cad2;
   background-color: #fff;
}
span.btn-selection-label-description {
   font-size: 14px;
   font-weight: normal;
   line-height: 20px;
   display: block;
   margin-top: 8px;
}