# Signature Pad

URL: https://ark-ui.com/docs/components/signature-pad
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/signature-pad.mdx

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

---

<ComponentPreview id="SignaturePad" />

## 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.

<Anatomy id="signature-pad" />

## Examples

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

<Example id="basic" />

### 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 id="image-preview" />

### 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 id="with-field" />

### 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 id="root-provider" />

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

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

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


**Root Data Attributes:**

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


**ClearTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

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


**Guide Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Guide Data Attributes:**

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


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

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


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseSignaturePadReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Segment Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Solid

**Root Props:**

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


**Root Data Attributes:**

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


**ClearTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

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


**Guide Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Guide Data Attributes:**

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


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes |  |
| `asChild` | `(props: ParentProps<'input'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'label'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

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


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseSignaturePadReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Segment Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'svg'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultPaths` | `string[]` | No | The default paths of the signature pad. |
| `disabled` | `boolean` | No | Whether the signature pad is disabled. |
| `drawing` | `DrawingOptions` | No | The drawing options. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; control: string; hiddenInput: string; label: string }>` | No | The ids of the signature pad elements. Useful for composition. |
| `name` | `string` | No | The name of the signature pad. Useful for form submission. |
| `readOnly` | `boolean` | No | Whether the signature pad is read-only. |
| `required` | `boolean` | No | Whether the signature pad is required. |
| `translations` | `IntlTranslations` | No | The translations of the signature pad. Useful for internationalization. |


**Root Data Attributes:**

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


**ClearTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

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


**Guide Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Guide Data Attributes:**

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


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

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


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `SignaturePadApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Segment Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultPaths` | `string[]` | No | The default paths of the signature pad.
Use when you don't need to control the paths of the signature pad. |
| `disabled` | `boolean` | No | Whether the signature pad is disabled. |
| `drawing` | `DrawingOptions` | No | The drawing options. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; control: string; hiddenInput: string; label: string }>` | No | The ids of the signature pad elements. Useful for composition. |
| `name` | `string` | No | The name of the signature pad. Useful for form submission. |
| `onDraw` | `(details: DrawDetails) => void` | No | Callback when the signature pad is drawing. |
| `onDrawEnd` | `(details: DrawEndDetails) => void` | No | Callback when the signature pad is done drawing. |
| `paths` | `string[]` | No | The controlled paths of the signature pad. |
| `readOnly` | `boolean` | No | Whether the signature pad is read-only. |
| `ref` | `Element` | No |  |
| `required` | `boolean` | No | Whether the signature pad is required. |
| `translations` | `IntlTranslations` | No | The translations of the signature pad. Useful for internationalization. |


**Root Data Attributes:**

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


**ClearTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseSignaturePadContext]>` | Yes |  |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Control Data Attributes:**

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


**Guide Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Guide Data Attributes:**

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


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'input'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'label'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Label Data Attributes:**

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


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseSignaturePadReturn` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Segment Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'svg'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


### Context

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

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `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. |