Signature Pad

A component that allows users to draw a signature using a signature pad.

Signature

Anatomy

<SignaturePad.Root>
  <SignaturePad.Label />
  <SignaturePad.Control>
    <SignaturePad.Segment />
    <SignaturePad.ClearTrigger />
    <SignaturePad.Guide />
  </SignaturePad.Control>
</SignaturePad.Root>

Examples

Image Preview

After the user draws a signature, you can display a preview of the signature as an image. This is useful when you want to show the user a preview of the signature before saving it.

Field

The Field component helps manage form-related state and accessibility attributes of a signature pad. It includes handling ARIA labels, helper text, and error text to ensure proper accessibility.

Root Provider

An alternative way to control the signature pad is to use the RootProvider component and the useSignaturePad hook. This way you can access the state and methods from outside the component.

API Reference

Props

Root

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`defaultPaths`		`string[]` The default paths of the signature pad. Use when you don't need to control the paths of the signature pad.
`disabled`		`boolean` Whether the signature pad is disabled.
`drawing`	`'{ size: 2, simulatePressure: true }'`	`DrawingOptions` The drawing options.
`ids`		`Partial<{ root: string; control: string; hiddenInput: string; label: string }>` The ids of the signature pad elements. Useful for composition.
`name`		`string` The name of the signature pad. Useful for form submission.
`onDraw`		`(details: DrawDetails) => void` Callback when the signature pad is drawing.
`onDrawEnd`		`(details: DrawEndDetails) => void` Callback when the signature pad is done drawing.
`paths`		`string[]` The controlled paths of the signature pad.
`readOnly`		`boolean` Whether the signature pad is read-only.
`required`		`boolean` Whether the signature pad is required.
`translations`		`IntlTranslations` The translations of the signature pad. Useful for internationalization.

Attribute	Description
`[data-scope]`	signature-pad
`[data-part]`	root
`[data-disabled]`	Present when disabled

ClearTrigger

Renders a <button> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Control

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Attribute	Description
`[data-scope]`	signature-pad
`[data-part]`	control
`[data-disabled]`	Present when disabled

Guide

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Attribute	Description
`[data-scope]`	signature-pad
`[data-part]`	guide
`[data-disabled]`	Present when disabled

HiddenInput

Renders a <input> element.

Prop	Default	Type
`value`		`string`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Label

Renders a <label> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Attribute	Description
`[data-scope]`	signature-pad
`[data-part]`	label
`[data-disabled]`	Present when disabled
`[data-required]`	Present when required

RootProvider

Renders a <div> element.

Prop	Default	Type
`value`		`UseSignaturePadReturn`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Segment

Renders a <svg> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Context

API

Property	Type
`empty`	`boolean` Whether the signature pad is empty.
`drawing`	`boolean` Whether the user is currently drawing.
`currentPath`	`string` The current path being drawn.
`paths`	`string[]` The paths of the signature pad.
`getDataUrl`	`(type: DataUrlType, quality?: number) => Promise<string>` Returns the data URL of the signature pad.
`clear`	`VoidFunction` Clears the signature pad.