ComponentsForms & inputs

Signature pad

Capture a handwritten or typed signature: delivery confirmations, consent forms, timesheet sign-off, customer approvals. Strokes are pressure-aware and smoothed, Undo and Clear are one click away, and Type is the keyboard path. Exports are SVG (and PNG on request) with dark ink in every theme, so they print correctly.

Pointer Events · perfect-freehand components/signature-pad.tsx, components/tabs.tsxtheme · material · accent · density · font

Sign with a finger, pen or mouse — or switch to Type.

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Field, SignaturePad } from "@vamos-ui/react";

<Field label="Customer signature" required>
  <SignaturePad name="signature" exportPng onValueChange={(sig) => setSignature(sig)} />
</Field>

Typed signatures use --font-signature (a cursive system stack by default) — point it at a handwriting font you load.

A drawn or typed image is not a qualified electronic signature (eIDAS, Turkey's Law 5070). The legal wording around it is your app's job.

Examples

Required in a consent form

Controlled value, accent ink on screen, PNG export. The Field error marks the pad invalid.

I confirm the treatment plan discussed today and consent to the 6-session laser programme at Moda Wellness, Kadıköy.

Read-only

A stored signature as an image (never injected as markup) with its localized timestamp.

Signature: Elif Demir

Signed Nov 4, 2026, 9:32 AM

API

SignaturePad

PropTypeDefault
value / defaultValue / onValueChange
{ kind: drawn | typed, svg, png?, text?, strokes?, width?, height?, signedAt }.
SignatureValue | null—
modes
Type is the accessible alternative — keep it unless you provide another.
("draw" | "type")[]["draw", "type"]
height
Pad height in px.
number176
penColor
On-screen ink. Exports always use dark ink (SIGNATURE_INK).
"fg" | "accent""fg"
exportPng
Adds a PNG data URL; the hidden input then carries the PNG instead of the SVG.
booleanfalse
name
Hidden input name (falls back to the Field's name).
string—
readOnly · disabled · invalid · required
Read from the surrounding Field when not set.
boolean—
labels
Built-in strings (signature namespace).
Partial<SignaturePadLabels>—

Helpers

PropTypeDefault
strokesToSvg(strokes, w, h) · textToSvg(text, w, h)
Standalone SVG documents.
string—
strokesToPng(strokes, w, h)
PNG data URL (browser only).
string | undefined—
svgDataUrl(svg)
For <img src>: safe display of stored SVG.
string—
Previous
Sidebar
Next
Signer status