HTML + CSSCheckboxes
Hand-drawn checkbox
A wobbly pen-drawn box where the check is scribbled in and the label gets a loose underline.
Settings
16px
1x
Code
<label class="uv-csc"><input type="checkbox"><span class="bx"><svg viewBox="0 0 40 40" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path class="sq" d="M6.5 7.8c8.6-1.1 17.9-1.6 26.6-.4.9 8.5 1 17.4.2 25.9-8.8.7-17.7.9-26.4.1C6 24.8 6.2 16.2 6.9 7.6"/><path class="ck" pathLength="1" d="M9 20.5c2.4 1.7 4.6 4.4 6.4 7.6 1.2-4.4 6.2-14.6 17.3-24.5M13.5 24.6c1.3.7 2.4 1.9 3 3"/></svg></span><span class="tx">Buy bread<svg viewBox="0 0 100 10" preserveAspectRatio="none" aria-hidden="true"><path pathLength="1" d="M2 6c18-3 36-3 54-1s30 1 42-2"/></svg></span></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
Not every interface should look machine made. This checkbox draws its box with an irregular path, as if sketched in a notebook, then scribbles a tick with a quick double stroke and underlines the label with a loose pen line. It suits shopping lists, journaling apps, classroom tools and brands with a handwritten personality.
Ink blue is the default, like a ballpoint pen, and the second color sets the underline. The strokes are SVG paths animated with dash offsets, so they stay sharp at any size and need no JavaScript.