Sprouting plant checkbox
The seed in the clay pot grows a stem and two leaves with a spring, then sways gently.
Settings
Code
<label class="uvq02-spr"><input type="checkbox"><span class="bx"><svg viewBox="0 0 32 32" aria-hidden="true"><g class="pl"><path class="sm" pathLength="1" d="M16 17.5c0-3-.7-5.6.3-8.8"/><path class="lf a" d="M16 12.2c-1.2-3-4.4-4-7-3.4.4 2.9 3.3 4.6 7 3.4z"/><path class="lf b" d="M16.3 9.4c1-3.2 4.2-4.6 7.2-4 .2 3-2.9 5-7.2 4z"/></g><ellipse class="so" cx="16" cy="17.6" rx="8.4" ry="1.5"/><ellipse class="sd" cx="16" cy="16.6" rx="1.4" ry=".95"/><path class="pt" d="M8.3 20h15.4l-1.9 9.3a1.6 1.6 0 0 1-1.6 1.3h-8.4a1.6 1.6 0 0 1-1.6-1.3z"/><rect class="rm" x="6.6" y="17.3" width="18.8" height="3.6" rx="1"/></svg></span>Plant basil</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
See all CheckboxesWhere to use it
This checkbox is a small terracotta pot drawn in inline SVG. Checking it hides the seed, grows a stem with a drawn stroke and opens two leaves with a springy pop, then the little plant sways slowly in a loop. Hovering gives the pot a gentle wobble. It fits gardening apps, habit trackers, sustainability pages and onboarding steps that celebrate growth.
The main color tints the leaves and stem, the secondary color the pot, so you can do sage and clay, lime and charcoal or autumn tones. Reduced motion stops the sway and keeps the plant still.