build69
Sign inGet API key
build69  /  Components  /  Text Inputs  /  SignaturePad

SignaturePad

v1.0.8NewUpdated 27 Aug 2026

Dependency-free canvas signature capture with smooth quadratic-curve strokes and velocity-based pen width. DPR-aware and responsive (ResizeObserver redraw), undo/clear toolbar, read-only display from a data URL, and PNG

View source← Back to catalog

Preview

Live · 11 stories
DefaultOpen ↗
▸Why this is recommendedformsignaturecanvasdraw+5

The default, out-of-the-box SignaturePad.

Recommended for+14
  • ✓Delivery / goods-received sign-off
  • ✓Quotation and contract acceptance
  • ✓Consent forms
  • ✓POS acknowledgements
Tags+6
formsignaturecanvasdrawe-signpointertouchpendefault
Features+4
  • Mouse / touch / pen via pointer events (coalesced events supported)
  • Smooth quadratic-curve strokes with velocity-based width
  • devicePixelRatio-aware sizing + ResizeObserver redraw
  • Undo stroke / clear with built-in toolbar (localisable labels)
  • Controlled (value/onChange) and uncontrolled (defaultValue) modes
  • Read-only display mode from an initial data URL
  • toDataURL(type, quality) + toSVG() via ref handle, onEnd(dataUrl) callback
  • Pen colour from currentColor token (dark-mode safe)
  • Keyboard: Backspace undoes last stroke, Escape cancels stroke in progress
  • Hidden form input via name, sizes sm / md / lg
Not recommended for−2
  • ✕Free-form sketching or image annotation (use a drawing tool)
  • ✕Typed name confirmation (use Input)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "SignaturePad" })

Usage

import { SignaturePad, type SignaturePadHandle } from '@/components/inputs/signature-pad';

const padRef = useRef<SignaturePadHandle>(null);

<SignaturePad ref={padRef} aria-label="Customer signature" onEnd={(dataUrl) => save(dataUrl)} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
value

Controlled signature data URL

string | null—
defaultValue

Uncontrolled initial data URL

string | null—
onChange

Fires on stroke end / undo / clear (null when empty)

(dataUrl: string | null) => void—
onEnd

Fires when a stroke finishes

(dataUrl: string) => void—
size

Canvas height preset

'sm' | 'md' | 'lg'—
strokeWidth

Base pen width; actual width varies with velocity

number—
readOnly

Display-only render of the value

boolean—
disabled

Disable drawing and toolbar

boolean—
ref

clear / undo / isEmpty / toDataURL / toSVG / focus

Ref<SignaturePadHandle>—

Related

Platform docsAll componentsSource files