Handwritten signature pad
A paper box to sign with a finger or mouse, with a stroke that thins with speed and an option to type your name.
Settings
Code
<div class="uvq06-sg"><div class="pd"><canvas role="img" aria-label="Signature area"></canvas><span class="hn" aria-hidden="true">Sign here</span><span class="x" aria-hidden="true">×</span><span class="ln" aria-hidden="true"></span><label class="ty"><span class="sr">Type your name</span><input placeholder="Type your name" autocomplete="name"></label></div><div class="rw"><button type="button" class="md" aria-pressed="false">Use keyboard</button><button type="button" class="cl">Clear</button><span class="ok" aria-live="polite"></span></div></div>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 Inputs
See all InputsWhere to use it
A signature field drawn on a canvas over dotted paper, with the classic cross and dashed line. Pointer events capture mouse, pen and touch, and each segment is smoothed with curves while its width thins with speed, so it looks like ink rather than a polyline. A keyboard mode swaps the canvas for a text input in a script typeface.
The main color is the ink and the second color the cross. Use it in delivery confirmations, rental agreements and consent forms, and export the drawing with canvas toDataURL when you need to store it.