Signature Pad

Signature input: draw with mouse, pen or touch (pressure-aware), undo and clear. A "Type instead" mode gives keyboard and screen-reader users an equivalent. Emits a PNG data URL (or typed name). The PNG is transparent with strokes in `ink` (dark by default), whatever the on-screen theme.

Import

import { SignaturePad } from '@marbleui/ui'

Props

<SignaturePad>

Prop	Type	Default
className	`string`	`—`
ink	`string`	`'#111827'`
label	`string`	`'Signature'`
onChange	`(value: { type: 'drawn'; dataUrl: string; } \| { type: 'typed'; name: string; } \| null) => void`	`—`

Usage notes

Signature capture for agreements and approvals: draw with a mouse, pen or finger, or switch to “Type instead” and enter a name.

<SignaturePad label="Customer signature" onChange={(signature) => setSignature(signature)} />

Uncontrolled. onChange gets { type: 'drawn', dataUrl } (PNG) after each stroke, { type: 'typed', name } while typing, or null when empty or after switching mode. A saved signature can’t be loaded back in.
Typed mode is the keyboard and screen-reader path; the canvas is exposed only as an image with a stroke count.
Line width follows pen pressure, and a tap leaves a dot. On screen strokes use the text colour; the PNG is transparent with strokes in ink (default #111827), so a dark-mode signature still prints dark.
The canvas resizes with its container and keeps the strokes. Switching to typed mode discards the drawing.

Example source · show

import { useState } from 'react'
import { SignaturePad } from './signature-pad'

function Demo() {
  const [v, setV] = useState<string>('Nothing yet')
  return <div className="flex w-96 flex-col gap-3"><SignaturePad onChange={(x) => setV(!x ? 'Nothing yet' : x.type === 'typed' ? `Typed: ${x.name}` : `Drawn (${Math.round(x.dataUrl.length / 1024)} KB PNG)`)} /><span className="text-xs text-fg-muted" aria-live="polite">{v}</span></div>
}
export const styles = { Default: Demo }

Source: packages/ui/src/signature-pad/signature-pad.tsx

Catalog