Case à cocher dessinée
Quand on la coche, la case rebondit légèrement et la coche se dessine trait par trait.
Réglages
Code
<label class="uv-cd"><input type="checkbox" checked><span><svg viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span>J’accepte</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 Cases à cocher
Où l’utiliser
Cette case à cocher animée convient aux moments où l'on donne son accord : « J'accepte les conditions » à l'inscription, le consentement à la newsletter sous un formulaire de contact ou la case de confidentialité d'une réservation. La case se remplit de votre couleur, rebondit une fois, et la coche se trace comme un coup de stylo rapide.
Il y a une vraie case à cocher en dessous, le formulaire reçoit donc la valeur normalement. Gardez un libellé court : toute la ligne est cliquable. L'effet est assez discret pour être répété plusieurs fois sur une page de réglages sans lasser.