Commutateur

    Le commutateur est un élément de contrôle qui permet de basculer entre deux états opposés (activé ou désactivé).

    Exemple


    Quand l'utiliser

    Le commutateur s’emploie pour activer ou désactiver une fonctionnalité ou une préférence de système, par exemple la réception de notifications.

    On évite de l’utiliser dans un formulaire, puisqu’il ne s’agit pas d’une préférence de système. On utilise plutôt la case à cocher unique comme pour l’option « J’atteste avoir lu et compris les conditions d’utilisation ».

    Comment l’utiliser

    Avant d’ajouter un commutateur, on doit s'assurer de respecter les critères suivants :

    • Le libellé est court et directif : il indique l’action accomplie par le commutateur.
    • Le libellé n’est pas une question. Par exemple, on priorise le libellé « Recevoir les notifications » plutôt que « Voulez-vous recevoir des notifications ? ».
    • Un libellé supplémentaire ne devrait pas être nécessaire pour indiquer l’état du commutateur (activé ou désactivé), puisque son visuel est suffisamment explicite. Si le besoin se présente, c’est un signe que le libellé est ambigu.
    • L’option choisie doit prendre effet immédiatement. L’utilisateur ne doit pas avoir à cliquer sur un bouton « Sauvegarder » ou « Appliquer ». Si cela n’est pas possible, il est préférable d’utiliser une case à cocher unique.
    • Le commutateur est activé lorsqu’il est glissé vers la droite et désactivé lorsqu’il est glissé vers la gauche.

    À faire



    À ne pas faire



    Informations techniques

    Dimensions

    Le commutateur est de 32 px de haut par 56 px de large.

    Le commutateur doit être accompagné du texte alternatif « activé » ou « désactivé », selon son état.

    Espacements

    Un espacement de 24 px est présent entre le libellé et le commutateur. La composante doit être centrée verticalement avec le libellé.

    États


    CSS du commutateur - activé
    background-color: #1472bf;

     

    CSS du commutateur - désactivé
    background-color: #c5cad2;

     

    Dernière mise à jour : 30 août 2023

    É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