1. Accueil  
  2. Design  
  3. Composants  
  4. Formulaire  
  5. Commutateur

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. Le composant doit être centré verticalement avec le libellé.

États


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

 

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

 

Dernière mise à jour : 6 novembre 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