Switch - Interrupteur

Composant permettant d'activer/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é.

Read_only-On

Read_only-On

Read_only-Off

Read_only-Off

 

Alternatives

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