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
Quand l'utiliser
La composante est principalement utilisée dans les formulaires, lorsque les choix de réponse ont besoin d’être précisés.
Lorsqu’un seul choix est possible dans un groupe d’options, elle doit comprendre un bouton radio. Lorsqu’il y a plus d’un choix de réponse possible dans un groupe d’options, elle 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é.
Concernant le positionnement des éléments, assurez-vous de respecter les critères suivants:
- 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
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
À 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
États
État par défaut
<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>
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 #d6dadf;
background-color: #fff;
}
span.btn-selection-label-description {
font-size: 14px;
font-weight: normal;
line-height: 20px;
display: block;
margin-top: 8px;
}
Pour les CSS des boutons radio, consultez la fiche Bouton radio.
Pour les CSS des cases à cocher, consultez la fiche Case à cocher.
État au survol
.input_radio-selection:hover+[class*=-label]
{
border-color: #6b9ac1;
}
État sélectionné
.input_radio-selection:checked+[class*=-label]
{
border-color: #6b9ac1;
background-color: #ecf2f7;
}
État désactivé
.disabled label,
.disabled label:hover {
color: #808A9D;
border: 1px solid #808A9D !important;
background-color: #F2F1F1;
cursor: not-allowed;
}
Dernière mise à jour : 24 novembre 2021