Signature Pad

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

Signature

Anatomy

To set up the signature pad correctly, you'll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the Signature Pad component in your project. Let's take a look at the most basic example:

Example not found

Example not found

Example not found

Example not found

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.

Example not found

Example not found

Example not found

Example not found

Using the Field Component

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.

Example not found

Example not found

Example not found

Example not found

Using the Root Provider

The RootProvider component provides a context for the signature-pad. It accepts the value of the useSignature-pad hook. You can leverage it to access the component state and methods from outside the signature-pad.

Example not found

Example not found

Example not found

Example not found

If you're using the RootProvider component, you don't need to use the Root component.

API Reference

Props

Root

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.

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

ClearTrigger

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

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.

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

Guide

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.

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

HiddenInput

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

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.

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

RootProvider

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

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

These are the properties available when using UsignatureUpad.Context, useUsignatureUpadContext hook or useUsignatureUpad hook.

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.