Générateur d’interrupteur CSS (toggle switch)

Comment ça marche

Saisissez dans le panneau de gauche le texte qui accompagne l’interrupteur, par exemple « Activer les notifications ». À droite, vous obtenez un bloc <style> et un bloc <label> ; collez les deux dans votre page et vous avez un interrupteur marche/arrêt fonctionnel, sans JavaScript. Dessous se trouve une vraie case à cocher : invisible mais focalisable. On l’atteint avec la touche Tab, on la bascule avec la barre d’espace, un lecteur d’écran annonce « activé/désactivé », et la valeur part avec le formulaire. Avec 52 pixels de large, l’interrupteur fait 30 pixels de haut et le bouton blanc glisse de 22 pixels vers la droite ; la ligne de résultat indique ces mesures. Saisissez la couleur de votre marque en HEX. Le style « case à cocher personnalisée » transforme la même structure en carré avec une coche ; avec une couleur claire, la coche est dessinée en foncé pour rester visible. Télécharger enregistre un aperçu PNG des deux états.

Cet outil est aussi connu sous le nom de toggle switch css, bouton on off css, checkbox css, switch css.

Qu'est-ce que Interrupteur (toggle switch) ?

Un interrupteur, ou toggle switch, est le bouton coulissant marche/arrêt que l’on connaît dans les réglages d’un téléphone. Le HTML n’a pas d’élément dédié : on restyle presque toujours une case à cocher avec du CSS. L’utilisateur attend d’un interrupteur que le changement s’applique tout de suite, sans bouton Enregistrer séparé.

Qu'est-ce que :focus-visible ?

:focus-visible est un sélecteur CSS qui s’applique quand un élément reçoit le focus au clavier, ou d’une autre façon où un anneau de focus est utile. Au clic de souris, la plupart des navigateurs ne l’appliquent pas. L’utilisateur au clavier voit l’anneau, l’utilisateur à la souris n’a pas de cadre inutile. Pris en charge depuis Chrome 86, Firefox 85 et Safari 15.4.

Case à cocher ou interrupteur : quelle différence ?

Dans le code, les deux sont le même <input type="checkbox"> ; la différence tient à l’apparence et à la promesse. Une case à cocher marque un choix, en général envoyé avec un bouton en fin de formulaire. Un interrupteur active ou désactive un réglage et annonce que le changement vaut tout de suite. Pour les lecteurs d’écran, l’interrupteur reçoit role="switch", la case non ; cet outil suit cette règle pour les deux styles.

Piège : display:none retire la case du clavier

Beaucoup d’exemples en ligne cachent la vraie case avec display:none ou visibility:hidden. Visuellement rien ne change, mais le champ disparaît aussi de l’ordre de tabulation et des lecteurs d’écran : à la souris l’interrupteur marche, au clavier ou avec un lecteur d’écran il ne marche plus. Cet outil cache la case avec opacity:0 sur 1 pixel : elle est invisible mais reste accessible.

Le second piège est l’indicateur de focus. Écrire outline:none sans rien d’autre laisse l’utilisateur au clavier sans repère. Le code généré contient une règle :focus-visible : pas d’anneau au clic de souris, un anneau de votre couleur au clavier.

Interrupteur ou case à cocher ?

Les deux gardent la même valeur marche/arrêt, mais ne promettent pas la même chose :

• Réglage appliqué tout de suite (mode sombre, notifications) → interrupteur
• Choix envoyé avec un formulaire et un bouton Enregistrer (j’accepte les conditions) → case à cocher
• Plusieurs éléments à choisir dans une liste → case à cocher
• Doit ressembler à un réglage d’application mobile → interrupteur arrondi
• Interface sobre aux angles nets → interrupteur carré

Questions fréquentes

Est-ce que ça marche vraiment sans JavaScript ?

Oui. La bascule est faite par la case à cocher du navigateur ; le CSS change seulement la couleur et la position du bouton selon :checked. Si quelque chose doit se passer au changement, comme enregistrer le réglage, ajoutez votre propre événement JavaScript sur le champ.

À quoi sert role="switch" ?

Il indique aux lecteurs d’écran qu’il s’agit d’un interrupteur marche/arrêt et non d’une case à cocher : l’utilisateur entend « désactivé » au lieu de « non coché ». Le style case à cocher n’ajoute pas ce rôle, car l’élément y est vraiment une case à cocher.

Puis-je mettre plusieurs interrupteurs sur une page ?

Oui. Ajoutez le bloc <style> une seule fois, puis copiez le bloc <label> autant de fois que nécessaire en changeant le texte. Ajoutez checked sur le champ d’un interrupteur qui doit démarrer activé.

Que fait le bouton Télécharger ?

Il enregistre un aperçu PNG des états désactivé et activé, l’un au-dessus de l’autre, utile pour faire valider un design ou documenter. Pour le code, utilisez Copier le résultat.