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

#### React

```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>
)

```

#### Solid

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

export const 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}>
        <RotateCcwIcon />
      </SignaturePad.ClearTrigger>
      <SignaturePad.Guide class={styles.Guide} />
    </SignaturePad.Control>
  </SignaturePad.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { SignaturePad } from '@ark-ui/vue/signature-pad'
import { RotateCcwIcon } from 'lucide-vue-next'
import styles from 'styles/signature-pad.module.css'
</script>

<template>
  <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">
        <RotateCcwIcon />
      </SignaturePad.ClearTrigger>
      <SignaturePad.Guide :class="styles.Guide" />
    </SignaturePad.Control>
  </SignaturePad.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { SignaturePad } from '@ark-ui/svelte/signature-pad'
  import RotateCcwIcon from 'lucide-svelte/icons/rotate-ccw'
  import styles from 'styles/signature-pad.module.css'
</script>

<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}>
      <RotateCcwIcon />
    </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**

#### React

```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>
  )
}

```

#### Solid

```tsx
import { SignaturePad } from '@ark-ui/solid/signature-pad'
import { RotateCcwIcon } from 'lucide-solid'
import { Show, createSignal } from 'solid-js'
import styles from 'styles/signature-pad.module.css'

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

  return (
    <div class="stack">
      <SignaturePad.Root
        class={styles.Root}
        onDrawEnd={(details) => details.getDataUrl('image/png').then((url) => setImageUrl(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}>
            <RotateCcwIcon />
          </SignaturePad.ClearTrigger>
          <SignaturePad.Guide class={styles.Guide} />
        </SignaturePad.Control>
      </SignaturePad.Root>

      <div class="stack">
        <span>Image Preview</span>
        <Show when={imageUrl()}>
          <img src={imageUrl()} alt="Signature" class={styles.Image} />
        </Show>
      </div>
    </div>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { SignaturePad, type SignaturePadDrawEndDetails } from '@ark-ui/vue/signature-pad'
import { RotateCcwIcon } from 'lucide-vue-next'
import { ref } from 'vue'
import styles from 'styles/signature-pad.module.css'

const imageUrl = ref('')

const handleDrawEnd = async (details: SignaturePadDrawEndDetails) => {
  imageUrl.value = await details.getDataUrl('image/png')
}
</script>

<template>
  <div class="stack">
    <SignaturePad.Root :class="styles.Root" @draw-end="handleDrawEnd">
      <SignaturePad.Label :class="styles.Label">Sign below</SignaturePad.Label>
      <SignaturePad.Control :class="styles.Control">
        <SignaturePad.Segment :class="styles.Segment" />
        <SignaturePad.ClearTrigger :class="styles.ClearTrigger">
          <RotateCcwIcon />
        </SignaturePad.ClearTrigger>
        <SignaturePad.Guide :class="styles.Guide" />
      </SignaturePad.Control>
    </SignaturePad.Root>

    <div class="stack">
      <span>Image Preview</span>
      <img v-if="imageUrl" :src="imageUrl" alt="Signature" :class="styles.Image" />
    </div>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { SignaturePad } from '@ark-ui/svelte/signature-pad'
  import RotateCcwIcon from 'lucide-svelte/icons/rotate-ccw'
  import styles from 'styles/signature-pad.module.css'

  let imageUrl = $state('')
</script>

<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}>
        <RotateCcwIcon />
      </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} />
    {/if}
  </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**

#### React

```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>
)

```

#### Solid

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

export const 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}>
          <RotateCcwIcon />
        </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>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Field } from '@ark-ui/vue/field'
import { SignaturePad } from '@ark-ui/vue/signature-pad'
import { RotateCcwIcon } from 'lucide-vue-next'
import field from 'styles/field.module.css'
import styles from 'styles/signature-pad.module.css'
</script>

<template>
  <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">
          <RotateCcwIcon />
        </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>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Field } from '@ark-ui/svelte/field'
  import { SignaturePad } from '@ark-ui/svelte/signature-pad'
  import RotateCcwIcon from 'lucide-svelte/icons/rotate-ccw'
  import field from 'styles/field.module.css'
  import styles from 'styles/signature-pad.module.css'
</script>

<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}>
        <RotateCcwIcon />
      </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**

#### React

```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>
  )
}

```

#### Solid

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

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

  return (
    <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}>
            <RotateCcwIcon />
          </SignaturePad.ClearTrigger>
          <SignaturePad.Guide class={styles.Guide} />
        </SignaturePad.Control>
      </SignaturePad.RootProvider>
    </div>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { SignaturePad, useSignaturePad } from '@ark-ui/vue/signature-pad'
import { RotateCcwIcon } from 'lucide-vue-next'
import styles from 'styles/signature-pad.module.css'

const signaturePad = useSignaturePad()
</script>

<template>
  <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">
          <RotateCcwIcon />
        </SignaturePad.ClearTrigger>
        <SignaturePad.Guide :class="styles.Guide" />
      </SignaturePad.Control>
    </SignaturePad.RootProvider>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { SignaturePad, useSignaturePad } from '@ark-ui/svelte/signature-pad'
  import RotateCcwIcon from 'lucide-svelte/icons/rotate-ccw'
  import styles from 'styles/signature-pad.module.css'

  const id = $props.id()
  const signaturePad = useSignaturePad({ id })
</script>

<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}>
        <RotateCcwIcon />
      </SignaturePad.ClearTrigger>
      <SignaturePad.Guide class={styles.Guide} />
    </SignaturePad.Control>
  </SignaturePad.RootProvider>
</div>

```

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

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