SignaturePad

A signing surface with smooth, speed-sensitive ink, undo and redo, replay, and PNG or SVG export.

When to use

• Capturing a handwritten signature for leases, agreements or approvals.
• When you need the strokes themselves (onChange) to submit or render later.
• Not for typed names or initials; use Input.
• Not for general drawing or annotation tools.

Usage

import { SignaturePad } from "@/components/iris/signature-pad/signature-pad";

const [strokes, setStrokes] = useState([]);
h(SignaturePad, {
  signer: "Dafni Rokka, tenant",
  fileName: "dafni-rokka-signature",
  label: "Signature for the Pangrati room lease",
  onChange: setStrokes,
});
// submit disabled until strokes.length > 0

Props

Prop	Type	Default	Description
signer	string	–	Printed under the baseline, such as the signer's name.
hint	string	"Sign here"	Resting hint on the baseline before the first stroke.
defaultColor	"black" | "blue" | "violet"	"black"	Starting ink colour.
defaultWidth	"fine" | "medium" | "bold"	"medium"	Starting nib width.
onChange	(strokes: InkStroke[]) => void	–	Receives the strokes after every change, including undo, redo and clear.
fileName	string	"signature"	Export file name, without extension.
label	string	"Signature pad"	Accessible name of the drawing surface.
className	string	–	Extra class on the root.

Notes

• Keyboard: Mod+Z undo, Shift+Mod+Z or Mod+Y redo, Delete/Backspace clears (undo restores), Escape stops a replay, arrows move within the colour and width radio groups.
• The pad is a focusable role="img" with a signature-pad role description whose label states the stroke count; a polite live region announces strokes, undo, clear, replay and export.
• Reduced motion skips the squeegee wipe and blur in favour of short fades.
• Ink colours adapt to the theme (light ink on the dark surface). The pad draws in a fixed 600 x 260 coordinate space and scales to its container width.