Cross-stitch checkbox
A wooden embroidery hoop with grid fabric where the tick is sewn in, one cross stitch at a time.
Settings
Code
<label class="uvq02-xst"><input type="checkbox"><span class="hp" aria-hidden="true"><span class="cl"><b style="--x:1;--y:4;--i:0"></b><b style="--x:2;--y:5;--i:1"></b><b style="--x:3;--y:6;--i:2"></b><b style="--x:4;--y:5;--i:3"></b><b style="--x:5;--y:4;--i:4"></b><b style="--x:6;--y:3;--i:5"></b><b style="--x:7;--y:2;--i:6"></b></span></span>Handmade gift</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
Instead of drawing a line, this checkbox embroiders its tick. The box is a wooden hoop with a metal clamp holding gridded fabric, and checking it fills seven cross stitches one after another in thread color. It is HTML and CSS with no images, a warm, handmade touch for craft shops, DIY tutorials, gift lists and slow living brands.
The main color is the thread and the secondary color the fabric, so red on cream, navy on linen or gold on black all work. Use it for one meaningful option rather than a long list, where the stitching would feel slow.