---
id: signature-pad
title: Signature Pad
description: 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 id="basic" />

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

<Example id="controlled" />

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

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

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

## API Reference

### Props

<ComponentTypes id="signature-pad" />

### Context

<ContextType id="signature-pad" />
