Signature padPro
Draw a signature with mouse, pen or finger; strokes thin with speed. Undo and clear.
Signature
Draw with your mouse, finger or stylus. If you can't draw, type your name in the field your form provides instead.
When to use
- Agreements, delivery confirmations and consent forms.
When not to use
- As the only way to sign: offer a typed-name alternative for people who can't draw.
Installation
Usage
Import it from @/components/ui/signature-pad after installing.
example.tsx
import { SignaturePad } from "@/components/ui/signature-pad";
<SignaturePad onChange={(png) => setSignature(png)} />API reference
SignaturePad
A canvas you draw on with any pointer. Lines thin out as you move faster.
| Prop | Type | Default | Description |
|---|---|---|---|
| onChange | (dataUrl: string | null) => void | – | A PNG data URL after each stroke; null when cleared. |
| color | string | – | Ink color; defaults to the text color. |
| height | number | 180 | Pad height in px. |
| label | string | "Signature" | Heading and accessible name. |
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Reach Undo and Clear |
Accessibility
- The canvas is an image labelled as empty or drawn.
- The hint tells people without a pointer to use a typed alternative.
Motion
- The "Sign here" hint fades out with the first stroke.
Responsive behavior
- Fills its container; redraws crisply on resize and high-DPI screens.
Performance
- Strokes are kept as points and redrawn only on resize or undo.
Notes for AI
- Upload the PNG data URL as a file; don't store it inline in a database row.
This page as Markdown, for assistants and coding agents:
/components/signature-pad/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt