Switch
Les switch permettent aux utilisateurs d'activer ou de désactiver une option individuelle (ex : On | Off)
Description
Plateformes
Anatomie
- Label : indique à l'utilisateur les informations attendues dans le champ
- Required (optionnel) : indique si le champ est requis ou non
- Tooltip (optionnel) : tooltip qui permet à l'utilisateur d'avoir plus de détail sur ce que est attendu dans le champ
- Label : indique à l'utilisateur l'élément qui va être activé ou désactivé
- Switch controller : indique visuellement l'état d'activation de l'élément (on | off)
- Helper (optionnel) : indique les règles de saisie du champ
Usage
Quand l'utiliser ?
Utiliser le Switch lorsque :
- L’action est instantanée et réversible.
- L’utilisateur doit pouvoir basculer rapidement entre deux états.
- Le changement prend effet sans validation supplémentaire.
Do's and don'ts
-
Do
Utiliser les switch pour communiquer l'activation d'un élément (par exemple, les états on | off).
-
Don't
Il est déconseillé d’utiliser les switch pour communiquer une sélection. On utilisera alors une checkbox.
-
Do
Utiliser les switch sans boutons "submit" ou "save". Les switch agissent immédiatement au clic et de manière autonome.
-
Don't
Il est interdit de valider l’action d’un switch avec un bouton de validation.
Anatomie
- Label : indique à l'utilisateur les informations attendues dans le champ
- Required (optionnel) : indique si le champ est requis ou non
- Tooltip (optionnel) : tooltip qui permet à l'utilisateur d'avoir plus de détail sur ce que est attendu dans le champ
- Label : indique à l'utilisateur l'élément qui va être activé ou désactivé
- Switch controller : indique visuellement l'état d'activation de l'élément (on | off)
- Helper (optionnel) : indique les règles de saisie du champ
Usage
Quand l'utiliser ?
Utiliser le Switch lorsque :
- L’action est instantanée et réversible.
- L’utilisateur doit pouvoir basculer rapidement entre deux états.
- Le changement prend effet sans validation supplémentaire.
Do's and don'ts
-
Do
Utiliser les switch pour communiquer l'activation d'un élément (par exemple, les états on | off).
-
Don't
Il est déconseillé d’utiliser les switch pour communiquer une sélection. On utilisera alors une checkbox.
-
Do
Utiliser les switch sans boutons "submit" ou "save". Les switch agissent immédiatement au clic et de manière autonome.
-
Don't
Il est interdit de valider l’action d’un switch avec un bouton de validation.
Des questions ou un feedback ?
N’hésitez pas à contacter la team Design System par mail.