Commutateur

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

    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 (actif ou inactif), 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.
    • L’état est actif lorsque le commutateur est glissé vers la droite et inactif 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 « actif » ou « inactif », selon son état.

    Espacements

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

    États


    CSS du commutateur - actif
    background-color: #1479CC

     

    CSS du commutateur - inactif
    background-color: #C5CAD2

     

    Dernière mise à jour : 15 août 2022