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

#### React

```tsx
import { SignaturePad } from '@ark-ui/react/signature-pad'

export const Basic = () => (
  <SignaturePad.Root>
    <SignaturePad.Label>Sign below</SignaturePad.Label>
    <SignaturePad.Control>
      <SignaturePad.Segment />
      <SignaturePad.ClearTrigger>Clear</SignaturePad.ClearTrigger>
      <SignaturePad.Guide />
    </SignaturePad.Control>
  </SignaturePad.Root>
)

```

#### Solid

```tsx
import { SignaturePad } from '@ark-ui/solid/signature-pad'

export const Basic = () => (
  <SignaturePad.Root>
    <SignaturePad.Label>Sign below</SignaturePad.Label>
    <SignaturePad.Control>
      <SignaturePad.Segment />
      <SignaturePad.ClearTrigger>Clear</SignaturePad.ClearTrigger>
      <SignaturePad.Guide />
    </SignaturePad.Control>
  </SignaturePad.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { SignaturePad } from '@ark-ui/vue/signature-pad'
</script>

<template>
  <SignaturePad.Root>
    <SignaturePad.Label>Sign below</SignaturePad.Label>
    <SignaturePad.Control>
      <SignaturePad.Segment />
      <SignaturePad.ClearTrigger>Clear</SignaturePad.ClearTrigger>
      <SignaturePad.Guide />
    </SignaturePad.Control>
  </SignaturePad.Root>
</template>

```

#### Svelte

```svelte
<script>
  import { SignaturePad } from '@ark-ui/svelte/signature-pad'
</script>

<SignaturePad.Root>
  <SignaturePad.Label>Sign below</SignaturePad.Label>
  <SignaturePad.Control>
    <SignaturePad.Segment />
    <SignaturePad.ClearTrigger>Clear</SignaturePad.ClearTrigger>
    <SignaturePad.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 { useState } from 'react'

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

  return (
    <>
      <SignaturePad.Root onDrawEnd={(details) => details.getDataUrl('image/png').then((url) => setImageUrl(url))}>
        <SignaturePad.Label>Sign below</SignaturePad.Label>
        <SignaturePad.Control>
          <SignaturePad.Segment fill="orange" />
          <SignaturePad.ClearTrigger>Clear</SignaturePad.ClearTrigger>
          <SignaturePad.Guide />
        </SignaturePad.Control>
      </SignaturePad.Root>

      {imageUrl && <img src={imageUrl} alt="Signature" />}
    </>
  )
}

```

#### Solid

```tsx
import { SignaturePad } from '@ark-ui/solid/signature-pad'
import { Show, createSignal } from 'solid-js'

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

  return (
    <>
      <SignaturePad.Root onDrawEnd={(details) => details.getDataUrl('image/png').then((url) => setImageUrl(url))}>
        <SignaturePad.Label>Sign below</SignaturePad.Label>
        <SignaturePad.Control>
          <SignaturePad.Segment fill="orange" />
          <SignaturePad.ClearTrigger>Clear</SignaturePad.ClearTrigger>
          <SignaturePad.Guide />
        </SignaturePad.Control>
      </SignaturePad.Root>
      <Show when={imageUrl()}>
        <img src={imageUrl()} alt="Signature" />
      </Show>
    </>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { SignaturePad, type SignaturePadDrawEndDetails } from '@ark-ui/vue/signature-pad'
import { ref } from 'vue'

const imageUrl = ref<string | null>(null)

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

<template>
  <SignaturePad.Root @draw-end="handleDrawEnd">
    <SignaturePad.Label>Sign below</SignaturePad.Label>
    <SignaturePad.Control>
      <SignaturePad.Segment fill="orange" />
      <SignaturePad.ClearTrigger>Clear</SignaturePad.ClearTrigger>
      <SignaturePad.Guide />
    </SignaturePad.Control>
  </SignaturePad.Root>
  <img v-if="imageUrl" :src="imageUrl" alt="Signature preview" />
</template>

```

#### Svelte

```svelte
<script>
  import { SignaturePad } from '@ark-ui/svelte/signature-pad'

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

<SignaturePad.Root onDrawEnd={(details) => details.getDataUrl('image/png').then((url) => (imageUrl = url))}>
  <SignaturePad.Label>Sign below</SignaturePad.Label>
  <SignaturePad.Control>
    <SignaturePad.Segment fill="orange" />
    <SignaturePad.ClearTrigger>Clear</SignaturePad.ClearTrigger>
    <SignaturePad.Guide />
  </SignaturePad.Control>
</SignaturePad.Root>

{#if imageUrl}
  <img src={imageUrl} alt="Signature" />
{/if}

```

### 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: with-field**

#### React

```tsx
import { Field } from '@ark-ui/react/field'
import { SignaturePad } from '@ark-ui/react/signature-pad'
import { useState } from 'react'

export const WithField = (props: Field.RootProps) => {
  const [value, setValue] = useState('')

  return (
    <Field.Root {...props}>
      <SignaturePad.Root onDrawEnd={(details) => details.getDataUrl('image/png').then((url) => setValue(url))}>
        <SignaturePad.Label>Label</SignaturePad.Label>
        <SignaturePad.Control>
          <SignaturePad.Segment />
          <SignaturePad.ClearTrigger>Clear</SignaturePad.ClearTrigger>
          <SignaturePad.Guide />
        </SignaturePad.Control>
        <SignaturePad.HiddenInput value={value} />
      </SignaturePad.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
      <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 { createSignal } from 'solid-js'

export const WithField = (props: Field.RootProps) => {
  const [value, setValue] = createSignal('')

  return (
    <Field.Root {...props}>
      <SignaturePad.Root onDrawEnd={(details) => details.getDataUrl('image/png').then((url) => setValue(url))}>
        <SignaturePad.Label>Label</SignaturePad.Label>
        <SignaturePad.Control>
          <SignaturePad.Segment />
          <SignaturePad.ClearTrigger>Clear</SignaturePad.ClearTrigger>
          <SignaturePad.Guide />
        </SignaturePad.Control>
        <SignaturePad.HiddenInput value={value()} />
      </SignaturePad.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Field, type FieldRootProps } from '@ark-ui/vue/field'
import { SignaturePad, type SignaturePadDrawEndDetails } from '@ark-ui/vue/signature-pad'
import { ref } from 'vue'

const imageUrl = ref('')

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

const props = defineProps<FieldRootProps>()
</script>

<template>
  <Field.Root v-bind="props">
    <SignaturePad.Root @draw-end="handleDrawEnd">
      <SignaturePad.Label>Label</SignaturePad.Label>
      <SignaturePad.Control>
        <SignaturePad.Segment />
        <SignaturePad.ClearTrigger>Clear</SignaturePad.ClearTrigger>
        <SignaturePad.Guide />
      </SignaturePad.Control>
      <SignaturePad.HiddenInput :value="imageUrl" />
    </SignaturePad.Root>
    <Field.HelperText>Additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

```

#### Svelte

```svelte
<script>
  import { Field } from '@ark-ui/svelte/field'
  import { SignaturePad } from '@ark-ui/svelte/signature-pad'

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

<Field.Root>
  <SignaturePad.Root onDrawEnd={(details) => details.getDataUrl('image/png').then((url) => (value = url))}>
    <SignaturePad.Label>Label</SignaturePad.Label>
    <SignaturePad.Control>
      <SignaturePad.Segment />
      <SignaturePad.ClearTrigger>Clear</SignaturePad.ClearTrigger>
      <SignaturePad.Guide />
    </SignaturePad.Control>
    <SignaturePad.HiddenInput {value} />
  </SignaturePad.Root>
  <Field.HelperText>Additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

```

### 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: root-provider**

#### React

```tsx
import { SignaturePad, useSignaturePad } from '@ark-ui/react/signature-pad'

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

  return (
    <>
      <button onClick={() => signaturePad.clear()}>Clear</button>

      <SignaturePad.RootProvider value={signaturePad}>
        <SignaturePad.Label>Sign below</SignaturePad.Label>
        <SignaturePad.Control>
          <SignaturePad.Segment />
          <SignaturePad.ClearTrigger>Clear</SignaturePad.ClearTrigger>
          <SignaturePad.Guide />
        </SignaturePad.Control>
      </SignaturePad.RootProvider>
    </>
  )
}

```

#### Solid

```tsx
import { SignaturePad, useSignaturePad } from '@ark-ui/solid/signature-pad'

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

  return (
    <>
      <button onClick={() => signaturePad().clear()}>Clear</button>

      <SignaturePad.RootProvider value={signaturePad}>
        <SignaturePad.Label>Sign below</SignaturePad.Label>
        <SignaturePad.Control>
          <SignaturePad.Segment />
          <SignaturePad.ClearTrigger>Clear</SignaturePad.ClearTrigger>
          <SignaturePad.Guide />
        </SignaturePad.Control>
      </SignaturePad.RootProvider>
    </>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { SignaturePad, useSignaturePad } from '@ark-ui/vue/signature-pad'

const signaturePad = useSignaturePad()
</script>

<template>
  <button @click="signaturePad.clear()">Clear</button>

  <SignaturePad.RootProvider :value="signaturePad">
    <SignaturePad.Label>Sign below</SignaturePad.Label>
    <SignaturePad.Control>
      <SignaturePad.Segment />
      <SignaturePad.ClearTrigger>Clear</SignaturePad.ClearTrigger>
      <SignaturePad.Guide />
    </SignaturePad.Control>
  </SignaturePad.RootProvider>
</template>

```

#### Svelte

```svelte
<script>
  import { SignaturePad, useSignaturePad } from '@ark-ui/svelte/signature-pad'

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

<SignaturePad.RootProvider value={signaturePad}>
  <SignaturePad.Label>Sign below</SignaturePad.Label>
  <SignaturePad.Control>
    <SignaturePad.Segment />
    <SignaturePad.ClearTrigger>Clear</SignaturePad.ClearTrigger>
    <SignaturePad.Guide />
  </SignaturePad.Control>
</SignaturePad.RootProvider>

```

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


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


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


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


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