Self-drawing checkbox
When checked, the box pops with a small bounce and the tick draws itself stroke by stroke.
Settings
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>I agree</label>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Checkboxes
Where to use it
This animated checkbox fits the moments where someone agrees to something: “I accept the terms” at sign-up, the newsletter consent under a contact form or the privacy box of a booking. The box fills with your main color, bounces once and the tick is drawn like a quick pen stroke.
There is a real checkbox underneath, so forms receive the value as usual. Keep the label short; the whole line toggles it. The effect is subtle enough to repeat several times on a settings page without getting tiring, which is not true of every checkbox animation.