Communications numériques gouvernementales Beta

Système de design gouvernemental

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, assurez-vous 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 du commutateur

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 espace de 24 px doit être réservé entre le libellé et le commutateur. La composante doit être centrée à l'horizontal avec le libellé. 

États du commutateur 


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

 

CSS du commutateur - inactif
Background-color : #C5CAD2

 

Dernière mise à jour : 4 novembre 2020