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 : 1.6 rem / 2.4 rem
Graisse : semibold

Libellé de la précision

Police de caractère : Open Sans
Taille : 1.4 rem / 2 rem
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 : 14 septembre 2021