# 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

<Anatomy id="signature-pad" />

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

## Examples

**Example: basic**

```ripple
import { SignaturePad } from 'ark-ripple/signature-pad';
import styles from 'styles/signature-pad.module.css';

export component Basic() {
  <SignaturePad.Root class={styles.Root}>
    <SignaturePad.Label class={styles.Label}>{'Sign below'}</SignaturePad.Label>
    <SignaturePad.Control class={styles.Control}>
      <SignaturePad.Segment class={styles.Segment} />
      <SignaturePad.ClearTrigger class={styles.ClearTrigger}>{'↺'}</SignaturePad.ClearTrigger>
      <SignaturePad.Guide class={styles.Guide} />
    </SignaturePad.Control>
  </SignaturePad.Root>
}

```

### 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: image-preview**

```ripple
import { SignaturePad } from 'ark-ripple/signature-pad';
import { track } from 'ripple';
import styles from 'styles/signature-pad.module.css';

export component ImagePreview() {
  let imageUrl = track('');

  <div class="stack">
    <SignaturePad.Root
      class={styles.Root}
      onDrawEnd={(details) => {
        details.getDataUrl('image/png').then((url) => {
          @imageUrl = url;
        });
      }}
    >
      <SignaturePad.Label class={styles.Label}>{'Sign below'}</SignaturePad.Label>
      <SignaturePad.Control class={styles.Control}>
        <SignaturePad.Segment class={styles.Segment} />
        <SignaturePad.ClearTrigger class={styles.ClearTrigger}>{'↺'}</SignaturePad.ClearTrigger>
        <SignaturePad.Guide class={styles.Guide} />
      </SignaturePad.Control>
    </SignaturePad.Root>
    <div class="stack">
      <span>{'Image Preview'}</span>
      if (@imageUrl) {
        <img src={@imageUrl} alt="Signature" class={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.

**Example: with-field**

```ripple
import { Field } from 'ark-ripple/field';
import { SignaturePad } from 'ark-ripple/signature-pad';
import field from 'styles/field.module.css';
import styles from 'styles/signature-pad.module.css';

export component WithField() {
  <Field.Root class={field.Root}>
    <SignaturePad.Root class={styles.Root}>
      <SignaturePad.Label class={styles.Label}>{'Label'}</SignaturePad.Label>
      <SignaturePad.Control class={styles.Control}>
        <SignaturePad.Segment class={styles.Segment} />
        <SignaturePad.ClearTrigger class={styles.ClearTrigger}>{'↺'}</SignaturePad.ClearTrigger>
        <SignaturePad.Guide class={styles.Guide} />
      </SignaturePad.Control>
    </SignaturePad.Root>
    <Field.HelperText class={field.HelperText}>{'Additional Info'}</Field.HelperText>
    <Field.ErrorText class={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.

**Example: root-provider**

```ripple
import { SignaturePad, useSignaturePad } from 'ark-ripple/signature-pad';
import styles from 'styles/signature-pad.module.css';

export component RootProvider() {
  const signaturePad = useSignaturePad();

  <div class="stack">
    <output>
      {'no of paths: '}
      {@signaturePad.paths.length}
    </output>
    <SignaturePad.RootProvider class={styles.Root} value={signaturePad}>
      <SignaturePad.Label class={styles.Label}>{'Sign below'}</SignaturePad.Label>
      <SignaturePad.Control class={styles.Control}>
        <SignaturePad.Segment class={styles.Segment} />
        <SignaturePad.ClearTrigger class={styles.ClearTrigger}>{'↺'}</SignaturePad.ClearTrigger>
        <SignaturePad.Guide class={styles.Guide} />
      </SignaturePad.Control>
    </SignaturePad.RootProvider>
  </div>
}

```

## API Reference

### Props

**Component API Reference**

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


### Context

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