Confetti burst checkbox
Checking the box fires eight little particles outwards, a tiny celebration for getting something done.
Settings
Code
<label class="uv-cb"><input type="checkbox"><span><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><svg viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span>Done</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 checkbox celebrates. It suits the moment someone finishes something they care about: ticking off a daily habit in a habit tracker, completing the last step of an onboarding checklist or marking a lesson as done in a language course. Eight dots in your two colors burst out of the box while the tick draws itself.
Save it for achievements. In a long form with ten checkboxes, the confetti gets old by the third one. Particles escape the box, so give it a bit of room, especially when checkboxes are stacked close together.