Composantes
Commutateur
Dans cette page :
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