Signature Pad

Signature capture with canvas drawing, hold-to-confirm, and form library integration.

Basic Usage

Your Signature

Click the pen button to open the signature pad

Works with react-hook-form via the value and onChange props.

Small Size

Medium Size (Default)

Large Size

Minimal (Default)

Card Variant

Outline Variant

Ghost Variant

Collect multiple signatures with SignaturePadCollection.

Client Signature*

Sign here to acknowledge the agreement

Witness Signature*

Witness signature is required

Notary Public

Notary signature and seal

Prop	Type	Default	Description
`value`	`string \| null`	-	Signature data URL (base64 PNG)
`onChange`	`(signature: string \| null) => void`	-	Callback when signature changes
`label`	`string`	-	Label text
`description`	`string`	-	Description text
`required`	`boolean`	`false`	Mark as required
`disabled`	`boolean`	`false`	Disable interaction
`error`	`string`	-	Error message
`variant`	`"minimal" \| "card" \| "outline" \| "ghost"`	`"minimal"`	Visual style
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size variant
`canvasWidth`	`number`	`400`	Canvas width in pixels
`canvasHeight`	`number`	`200`	Canvas height in pixels
`strokeWidth`	`number`	`2`	Pen stroke width
`holdDuration`	`number`	`1500`	Hold duration in ms for confirm button
`ariaLabel`	`string`	-	Accessibility label
`className`	`string`	-	Additional CSS classes
`classNames`	`object`	-	Per-part class overrides (container, canvas, preview, dialog, actions)

Prop	Type	Default	Description
`items`	`SignaturePadItemProps[]`	-	Array of signature pad configs
`layout`	`"stack" \| "grid" \| "inline"`	`"stack"`	Layout direction
`columns`	`1 \| 2 \| 3 \| 4`	`2`	Grid columns (grid layout only)
`gap`	`"sm" \| "md" \| "lg"`	`"md"`	Gap between items
`className`	`string`	-	Additional CSS classes

On This Page