# Signature Pad

URL: https://ark-ui.com/docs/components/signature-pad
LLM: https://ark-ui.com/llms.txt/components/signature-pad

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

---



## Anatomy



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

## Examples

```tsx
import { SignaturePad } from '@ark-ui/react/signature-pad'
import { RotateCcwIcon } from 'lucide-react'
import styles from 'styles/signature-pad.module.css'

export const Basic = () => (
  <SignaturePad.Root className={styles.Root}>
    <SignaturePad.Label className={styles.Label}>Sign below</SignaturePad.Label>
    <SignaturePad.Control className={styles.Control}>
      <SignaturePad.Segment className={styles.Segment} />
      <SignaturePad.ClearTrigger className={styles.ClearTrigger}>
        <RotateCcwIcon />
      </SignaturePad.ClearTrigger>
      <SignaturePad.Guide className={styles.Guide} />
    </SignaturePad.Control>
  </SignaturePad.Root>
)
```

### Controlled

Use the `paths` prop with `onDraw` (React/Solid), `v-model:paths` (Vue), or `bind:paths` (Svelte) to control the
signature pad externally. The example tracks the path count and can clear the signature from outside the component.

```tsx
import { SignaturePad } from '@ark-ui/react/signature-pad'
import { RotateCcwIcon } from 'lucide-react'
import { useState } from 'react'
import button from 'styles/button.module.css'
import styles from 'styles/signature-pad.module.css'

export const Controlled = () => {
  const [paths, setPaths] = useState<string[]>([])

  return (
    <div className="stack">
      <output>paths: {paths.length}</output>
      <SignaturePad.Root className={styles.Root} paths={paths} onDraw={(details) => setPaths(details.paths)}>
        <SignaturePad.Label className={styles.Label}>Sign below</SignaturePad.Label>
        <SignaturePad.Control className={styles.Control}>
          <SignaturePad.Segment className={styles.Segment} />
          <SignaturePad.ClearTrigger className={styles.ClearTrigger}>
            <RotateCcwIcon />
          </SignaturePad.ClearTrigger>
          <SignaturePad.Guide className={styles.Guide} />
        </SignaturePad.Control>
      </SignaturePad.Root>
      <button className={button.Root} onClick={() => setPaths([])}>
        Clear
      </button>
    </div>
  )
}
```

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

```tsx
import { SignaturePad } from '@ark-ui/react/signature-pad'
import { RotateCcwIcon } from 'lucide-react'
import { useState } from 'react'
import styles from 'styles/signature-pad.module.css'

export const ImagePreview = () => {
  const [imageUrl, setImageUrl] = useState('')

  return (
    <div className="stack">
      <SignaturePad.Root
        className={styles.Root}
        onDrawEnd={(details) => details.getDataUrl('image/png').then((url) => setImageUrl(url))}
      >
        <SignaturePad.Label className={styles.Label}>Sign below</SignaturePad.Label>
        <SignaturePad.Control className={styles.Control}>
          <SignaturePad.Segment className={styles.Segment} />
          <SignaturePad.ClearTrigger className={styles.ClearTrigger}>
            <RotateCcwIcon />
          </SignaturePad.ClearTrigger>
          <SignaturePad.Guide className={styles.Guide} />
        </SignaturePad.Control>
      </SignaturePad.Root>

      <div className="stack">
        <span>Image Preview</span>
        {imageUrl && <img src={imageUrl} alt="Signature" className={styles.Image} />}
      </div>
    </div>
  )
}
```

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

```tsx
import { Field } from '@ark-ui/react/field'
import { SignaturePad } from '@ark-ui/react/signature-pad'
import { RotateCcwIcon } from 'lucide-react'
import field from 'styles/field.module.css'
import styles from 'styles/signature-pad.module.css'

export const WithField = () => (
  <Field.Root className={field.Root}>
    <SignaturePad.Root className={styles.Root}>
      <SignaturePad.Label className={styles.Label}>Label</SignaturePad.Label>
      <SignaturePad.Control className={styles.Control}>
        <SignaturePad.Segment className={styles.Segment} />
        <SignaturePad.ClearTrigger className={styles.ClearTrigger}>
          <RotateCcwIcon />
        </SignaturePad.ClearTrigger>
        <SignaturePad.Guide className={styles.Guide} />
      </SignaturePad.Control>
    </SignaturePad.Root>
    <Field.HelperText className={field.HelperText}>Additional Info</Field.HelperText>
    <Field.ErrorText className={field.ErrorText}>Error Info</Field.ErrorText>
  </Field.Root>
)
```

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

```tsx
import { SignaturePad, useSignaturePad } from '@ark-ui/react/signature-pad'
import { RotateCcwIcon } from 'lucide-react'
import styles from 'styles/signature-pad.module.css'

export const RootProvider = () => {
  const signaturePad = useSignaturePad()

  return (
    <div className="stack">
      <output>no of paths: {signaturePad.paths.length}</output>
      <SignaturePad.RootProvider className={styles.Root} value={signaturePad}>
        <SignaturePad.Label className={styles.Label}>Sign below</SignaturePad.Label>
        <SignaturePad.Control className={styles.Control}>
          <SignaturePad.Segment className={styles.Segment} />
          <SignaturePad.ClearTrigger className={styles.ClearTrigger}>
            <RotateCcwIcon />
          </SignaturePad.ClearTrigger>
          <SignaturePad.Guide className={styles.Guide} />
        </SignaturePad.Control>
      </SignaturePad.RootProvider>
    </div>
  )
}
```

## API Reference

### Props

### Root

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`defaultPaths`**
Type: `string[]`
Required: false
Default Value: `undefined`
Description: The default paths of the signature pad.
Use when you don't need to control the paths of the signature pad.

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the signature pad is disabled.

**`drawing`**
Type: `DrawingOptions`
Required: false
Default Value: `'{ size: 2, simulatePressure: true }'`
Description: The drawing options.

**`ids`**
Type: `Partial<{ root: string; control: string; hiddenInput: string; label: string }>`
Required: false
Default Value: `undefined`
Description: The ids of the signature pad elements. Useful for composition.

**`name`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The name of the signature pad. Useful for form submission.

**`onDraw`**
Type: `(details: DrawDetails) => void`
Required: false
Default Value: `undefined`
Description: Callback when the signature pad is drawing or the committed paths change.
`paths` contains only committed strokes; use `currentPath` for the in-progress stroke.

**`onDrawEnd`**
Type: `(details: DrawEndDetails) => void`
Required: false
Default Value: `undefined`
Description: Callback when the signature pad is done drawing.

**`paths`**
Type: `string[]`
Required: false
Default Value: `undefined`
Description: The controlled paths of the signature pad.

**`readOnly`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the signature pad is read-only.

**`required`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the signature pad is required.

**`translations`**
Type: `IntlTranslations`
Required: false
Default Value: `undefined`
Description: The translations of the signature pad. Useful for internationalization.

#### Data Attributes

**`data-scope`**: signature-pad
**`data-part`**: root
**`data-disabled`**: Present when disabled

### ClearTrigger

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Control

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: signature-pad
**`data-part`**: control
**`data-disabled`**: Present when disabled

### Guide

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: signature-pad
**`data-part`**: guide
**`data-disabled`**: Present when disabled

### HiddenInput

#### Props

**`value`**
Type: `string`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Label

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: signature-pad
**`data-part`**: label
**`data-disabled`**: Present when disabled
**`data-required`**: Present when required

### RootProvider

#### Props

**`value`**
Type: `UseSignaturePadReturn`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Segment

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `empty` | `boolean` | Whether the signature pad is empty. |
| `drawing` | `boolean` | Whether the user is currently drawing. |
| `currentPath` | `string | null` | 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. |