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é.

    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


    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 #c5cad2;
        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, consulter la fiche Bouton radio.
    Pour les CSS des cases à cocher, consulter la fiche Case à cocher.

     

    État au survol

    .input_radio-selection:hover+[class*=-label]
    {
        border-color: #4a98d9;
    }

     
     

    État sélectionné

    .input_radio-selection:checked+[class*=-label]
    {
        border-color: #4a98d9;
        background-color: #dae6f0;
    }

     
     

    État désactivé

    .disabled label,
    .disabled label:hover {
        color: #8893a2;
        border: 1px solid #c5cad2 !important;
        background-color: #f1f1f2;
        cursor: not-allowed;
    }

    Dernière mise à jour : 24 novembre 2021

    Évaluation de page

    L’information sur cette page vous a-t-elle été utile?
    Avis général

    Des questions ou besoin de renseignements?

    Communiquez avec Services Québec