Ark Logo
GitHub
Components
Signature pad

Signature Pad

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

Signature

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.

Examples

Learn how to use the Signature Pad component in your project. Let's take a look at the most basic example:

import { SignaturePad } from '@ark-ui/react'

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

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.

import { useState } from 'react'
import { SignaturePad } from '@ark-ui/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" />}
    </>
  )
}

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.

import { useState } from 'react'
import { Field, SignaturePad } from '@ark-ui/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>
  )
}

API Reference

Root

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
disabled
boolean

Whether the signature pad is disabled.

drawing'{ size: 2, simulatePressure: true }'
DrawingOptions

The drawing options.

ids
Partial<{ root: string control: string hiddenInput: string label: string }>

The ids of the signature pad elements. Useful for composition.

name
string

The name of the signature pad. Useful for form submission.

onDraw
(details: DrawDetails) => void

Callback when the signature pad is drawing.

onDrawEnd
(details: DrawEndDetails) => void

Callback when the signature pad is done drawing.

readOnly
boolean

Whether the signature pad is read-only.

required
boolean

Whether the signature pad is required.

translations
IntlTranslations

The translations of the signature pad. Useful for internationalization.

Data AttributeValue
[data-scope]signature-pad
[data-part]root
[data-disabled]Present when disabled

ClearTrigger

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.

Control

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
Data AttributeValue
[data-scope]signature-pad
[data-part]control
[data-disabled]Present when disabled

Guide

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
Data AttributeValue
[data-scope]signature-pad
[data-part]guide
[data-disabled]Present when disabled

HiddenInput

PropDefaultType
value
string

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.

Label

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
Data AttributeValue
[data-scope]signature-pad
[data-part]label
[data-disabled]Present when disabled

RootProvider

PropDefaultType
value
UseSignaturePadReturn

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.

Segment

PropDefaultType
asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.