Commutateur
Le commutateur est un élément de contrôle qui permet de basculer entre deux états opposés (activé ou désactivé).
Exemple
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
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.
Quand ne pas l’utiliser
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 ».
Anatomie
- Groupe de commutateurs
- Commutateur
- Libellé (du groupe)
- Libellé d’option
- Élément de contrôle
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Groupe de commutateurs
Pour plusieurs commutateurs associés à une même thématique, le groupe inclut un libellé décrivant l’ensemble des commutateurs.
Libellé d’option
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 ? ».
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans la trousse de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Commutateur (complet)
Dimensions : Les commutateurs peuvent être configurés pour prendre toute la largeur disponible (limité à 825 px).
Espacements : Un commutateur seul comporte un espacement de 32 px au-dessus et au-dessous du composant. Dans un groupe de commutateurs, le même espacement de 32 px encadre l’ensemble du groupe, tandis qu’un espacement de 24 px sépare chaque commutateur à l’intérieur.
Groupe de commutateurs
Positionnement, alignement et dimensions : Tous les commutateurs d’un groupe partagent les mêmes réglages de largeur et d’alignement, afin que l’ensemble reste uniforme et cohérent visuellement.
Libellé d’option
Positionnement et alignement : Recommandé à gauche, mais peut être placé à droite selon le design, tout en respectant la cohérence du groupe.
Comportements
Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu’ils déclenchent.
Commutateur (complet)
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é lorsque l’élément de contrôle est glissé vers la droite et désactivé lorsqu’il est glissé vers la gauche.
Le commutateur doit être accompagné du texte de remplacement « activé » ou « désactivé », selon son état.
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Instructions sur l’interaction avec le composant via la souris :
- Cliquer sur l’élément de contrôle du commutateur pour alterner entre l’état activé et désactivé.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Utiliser la touche Tab pour naviguer jusqu’au commutateur.
- Utiliser la touche Espace pour basculer l’état du commutateur.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 15 janvier 2026