Signature Pad

Touch- and mouse-compatible canvas for capturing a drawn signature. Built for signature-api / apps/sign-ui, the reference implementation of the TRA consent-and-signature flow.

Basic

Draw your signature here.

const padRef = useRef<SignaturePadHandle>(null);
const [valid, setValid] = useState(false);

<SignaturePad ref={padRef} onChange={(s) => setValid(s.valid)} />
<Button variant="outline" onClick={() => padRef.current?.clear()}>Clear</Button>
<Button disabled={!valid} onClick={() => submit(padRef.current?.toDataURL())}>Submit</Button>

Disabled

Draw your signature here.

<SignaturePad disabled />

Validation heuristic

onChange's valid flag goes true once the drawing has at least 10 distinct points or a bounding box of 40px in either dimension — a stray tap doesn't count as a signature. The imperative handle exposes the same check via isValid(), plus toDataURL() for the PNG data URL to submit. signature-api re-validates structurally on the server (real PNG, sane size) but does not re-implement this stroke geometry — that check only makes sense where the point data lives.