Switch - Interrupteur

L'interrupteur permet d'activer ou désactiver une option.

Anatomie

Switch - Anatomie
  1. Switch control
  2. Label
  3. Label On/Off

 

États

Default / Active - Défaut / Actif

  • État par défaut : L'interrupteur apparaît dans sa position initiale, indiquant l'état actuel sans interaction utilisateur.
  • État actif : Lorsque l'interrupteur est activé, il change de couleur ou de position pour indiquer qu'il est maintenant sur l'option « On ».
Default-On

Default-On

Default-Off

Default-Off


Hover - Survol

Lorsque l'utilisateur passe la souris sur l'interrupteur, un léger changement de couleur ou d'ombre peut indiquer que l'élément est cliquable.

Hover-Off

Hover-Off

Hover-On

Hover-On

 

Read-only - Lecture seule

L'interrupteur est visible mais non interactif, généralement grisé ou avec une indication visuelle claire qu'il ne peut pas être modifié. Ses informations restent cependant accessibles et peuvent être lues par un lecteur d’écran.

Read_only-On

Read_only-On

Read_only-Off

Read_only-Off

 

Disabled - Désactivé

L'interrupteur n’est pas interactif, il ne peut pas recevoir le focus et il n’est pas lu par les lecteurs d’écrans. Puisque son design ne respecte pas les règles d’accessibilité, son utilisation doit être faite avec précaution. Consultez la page Quand utiliser un état disabled pour plus d’informations.

Disabled-Off

Disabled-Off

Disabled-On

Disabled-On

 

 

Alternatives

Il est conseillé d'utiliser des alternatives comme les cases à cocher (checkbox) ou les boutons radio (radio buttons) dans les cas suivants :