Toggle croix et coche
Le bouton fait un tour complet en traversant l'interrupteur et remplace une croix rouge par une coche.
Réglages
Code
<label class="uv-tc"><input type="checkbox" checked><span><i><svg viewBox="0 0 24 24"><path class="x" d="M7 7l10 10M17 7L7 17"/><path class="v" d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></span></label>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Interrupteurs
Où l’utiliser
Quand un interrupteur gère une autorisation, les icônes lèvent tout doute. Ce toggle avec croix et coche convient aux préférences de cookies (« Cookies de mesure d'audience »), aux options de confidentialité comme « Profil public » ou aux alertes e-mail d'un compte client. Désactivé, le rail est rouge avec une croix. Activé, le bouton roule et affiche une coche.
Le rouge est un signal fort qui peut faire passer une option anodine pour une erreur. Pour quelque chose d'aussi léger que « Afficher les astuces », un toggle neutre sera plus aimable. La couleur de l'état activé suit votre couleur principale ; le rouge reste fixe.