Switch with Icons
Interrupteurs à bascule avec icône SVG dans la poignée : l'icône change au toggle (soleil/lune, son/silence, activé/désactivé). La poignée glisse avec un dépassement élastique. Accessible au clavier et aux lecteurs d'écran.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Hover comprend 48 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0368-root (250 px de haut, fond rgb(26, 26, 36)) centre trois rangées de réglages dans .mi-switch-scene. Chaque rangée est formée d'un label span.mi-switch-label et d'un interrupteur div.mi-switch. L'interrupteur (80×40 px, coins arrondis) contient une poignée div.mi-switch-knob (32×32 px) qui contient un SVG d'icône. La poignée se déplace de 4 px (état off) à 44 px (état on) via la propriété CSS left. La transition (cubic-bezier(0.34, 1.56, 0.64, 1), 0,3 s) donne un léger dépassement vers la droite avant de s'ancrer, donnant l'impression d'un élastique.
Chaque interrupteur a role="switch", aria-checked (true ou false) et tabindex="0". Le script lit le texte du label voisin pour construire dynamiquement l'aria-label de l'interrupteur : un interrupteur précédé du label Notifications reçoit aria-label="Notifications". Cela évite d'avoir des ID statiques qui doubleraient en présence de deux copies du composant. Au clic ou à l'appui de la touche Espace/Entrée, le script bascule la classe .on et met à jour aria-checked.
Chaque icône SVG a deux états CSS : l'icône d'état off est visible quand la classe .on est absente, et vice-versa. Le changement d'icône se fait par transition d'opacité de 0,2 s. Les deux icônes sont présentes dans le DOM en même temps ; leur changement est géré entièrement en CSS via les sélecteurs .mi-switch:not(.on) et .mi-switch.on. Aucune manipulation du DOM n'est nécessaire pour le changement d'icône.
Accessibilité
- Rôle switch : chaque interrupteur a
role="switch"etaria-checked. Les lecteurs d'écran l'annoncent comme un commutateur et indiquent son état (actif / inactif). - Clavier : Tab atteint chaque interrupteur (roving tabindex entre les rangées), Espace ou Entrée le bascule. Le contour de focus (
:focus-visible) est visible à la navigation au clavier. - Label dynamique : l'
aria-labelest construit depuis le texte duspan.mi-switch-labelvoisin par le JavaScript. Cette approche fonctionne avec deux copies du composant sur la même page sans ID dupliqués. - Mouvement réduit : sous
prefers-reduced-motion: reduce, le déplacement de la poignée est instantané (transitionleftsupprimée) ; les transitions de couleur de fond et d'icône restent actives sur 0,15 s.
Compatibilité navigateur
CSS (transitions left, background-color, opacity) + 0,4 Ko de JavaScript (classList, setAttribute, keydown), aucune dépendance. Vérifié dans Chromium 151 : trois interrupteurs indépendants, aria-checked mis à jour, aria-label construit depuis le label voisin, deux copies de la racine indépendantes, mouvement réduit sans glissement, 0 erreur.
Sans JavaScript, les interrupteurs sont visuellement corrects mais ne basculent pas au clic. Sans transitions CSS, la poignée se déplace et l'icône change instantanément.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0368-root">
<div class="mi-switch-scene">
<div class="mi-switch-row">
<span class="mi-switch-label">Notifications</span>
<div class="mi-switch on" role="switch" aria-checked="true" tabindex="0">
<div class="mi-switch-knob">
<!-- icône SVG état on -->
</div>
</div>
</div>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Icônes dans les poignées (HTML — SVG dans .mi-switch-knob) |
Soleil/lune, son/silence, check/croix | Remplacez les SVG par n'importe quelle paire d'icônes de 16 px. Gardez les deux SVG dans la poignée (un pour chaque état) ; le CSS gère leur affichage via .mi-switch:not(.on) et .mi-switch.on. |
Couleur de fond actif (CSS — background de .mi-switch.on) |
Violet #6366f1 |
Passez à vert (#10b981) pour un switch d'activation, ou rouge (#ef4444) pour une fonction critique désactivable. La couleur de la poignée au repos (.mi-switch-knob) peut rester blanche quelle que soit la couleur du fond. |
Rebond de la poignée (CSS — cubic-bezier de la transition left) |
cubic-bezier(0.34, 1.56, 0.64, 1) |
ease-out donne un glissement sans rebond. Augmentez le deuxième paramètre au-delà de 1,5 pour un rebond plus prononcé. |
État initial (HTML — classe .on sur .mi-switch) |
Notifications ON, Mode sombre OFF, Son ON | Ajoutez ou retirez la classe .on dans le HTML pour changer l'état initial de chaque interrupteur. Le JS lit l'état initial et fixe aria-checked en conséquence. |
FAQ
sw.classList.contains('on') et appelez votre logique (ex. : document.body.classList.toggle('dark-theme')). Le script actuel ne fait que basculer l'état visuel et ARIA..disabled au div .mi-switch et vérifiez sa présence en début de gestionnaire pour ignorer le clic. Ajoutez aussi aria-disabled="true" et retirez tabindex pour que les lecteurs d'écran l'annoncent comme indisponible..mi-switch-knob. Les transitions de fond et de poignée fonctionnent de façon identique. Sans icône, le label textuel adjacent (span.mi-switch-label) est d'autant plus important pour indiquer ce que l'interrupteur contrôle.
