Signature Pad

ProNew

A signature field where people draw with a pointer or type their name, stored as SVG paths or text.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/signature-pad

Prop	Type	Default	Description
`label`	`string`	-	Visible field label and base of the accessible names.
`value`	`SignatureValue`	-	Controlled signature.
`defaultValue`	`SignatureValue`	`{ mode: "draw", strokes: [] }`	Initial signature when uncontrolled.
`onValueChange`	`(value: SignatureValue) => void`	-	Called after each stroke, keystroke or mode switch.
`name`	`string`	-	Adds a hidden input with the value as JSON.
`disabled`	`boolean`	`false`	Disables drawing, typing and the action buttons.

Also accepts all <div> props.

Drawing needs a pointer. Keyboard users can switch to Type mode and enter their name.
Switching modes clears the current signature.
To export an image, render the strokes into an <svg viewBox="0 0 600 200"> on your server or client.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/signature-pad

Prop	Type	Default	Description
`label`	`string`	-	Visible field label and base of the accessible names.
`value`	`SignatureValue`	-	Controlled signature.
`defaultValue`	`SignatureValue`	`{ mode: "draw", strokes: [] }`	Initial signature when uncontrolled.
`onValueChange`	`(value: SignatureValue) => void`	-	Called after each stroke, keystroke or mode switch.
`name`	`string`	-	Adds a hidden input with the value as JSON.
`disabled`	`boolean`	`false`	Disables drawing, typing and the action buttons.

Also accepts all <div> props.

Drawing needs a pointer. Keyboard users can switch to Type mode and enter their name.
Switching modes clears the current signature.
To export an image, render the strokes into an <svg viewBox="0 0 600 200"> on your server or client.