Signature Pad

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add signature-pad

Usage#

import {
  SignaturePad,
  SignaturePadActions,
  SignaturePadUndo,
  SignaturePadClear,
} from "@/components/ui/signature-pad"

export function Example() {
  const [strokes, setStrokes] = React.useState<string[]>([])
  return (
    <SignaturePad value={strokes} onValueChange={setStrokes}>
      <SignaturePadActions>
        <SignaturePadUndo />
        <SignaturePadClear />
      </SignaturePadActions>
    </SignaturePad>
  )
}

Play it back#

The value is one SVG path per stroke, in the order the hand wrote them, which is exactly what a Signature takes as its children. signatureViewBox(strokes) gives it the box around the ink, so it takes its width from the first paint. The Signature page has the full playground, with every speed and size.

States#

Inside a Field, the pad takes the field's label and hint as its name and description, and its hasError and disabled cascade in, the same as an Input. An error paints the frame; a disabled pad keeps its signature on show but no longer takes the pen or offers Undo and Clear. Both props can also be set on the pad itself. Focus works like any field's: the first stroke focuses the pad, and it stays lit through every lift of the pen and every Undo until you click away, so a signature of five strokes does not blink five times. While it has focus, Ctrl / ⌘ + Z takes back the last stroke.

Without actions#

Undo and Clear are parts, not props: leave SignaturePadActions out and the pad is only a page, for an initial box or a flow that clears it some other way. With them in, they stay hidden until there is a stroke to take back. placeholder replaces the line under the empty page.

In a form#

With a name, the pad submits the drawing as a standalone SVG document, its ink in currentColor: store it, email it, or render it back. Sign, then submit, to see exactly what the form receives. signatureToSvg(strokes) builds the same document from a controlled value.

API reference#

FAQ#