SignaturePad

A component that allows users to draw a signature.

Usage

Provides a canvas for users to draw their signatures, with support for clearing and form integration.

import { SignaturePad, Button } from "@elemnts-ui/react";

<SignaturePad.Root>
  <SignaturePad.Label>Signature</SignaturePad.Label>
  <SignaturePad.Control>
    <SignaturePad.Segment />
    <SignaturePad.ClearTrigger asChild>
      <Button variant="tertiary" size="xs">
        Clear
      </Button>
    </SignaturePad.ClearTrigger>
    <SignaturePad.Guide />
  </SignaturePad.Control>
  <SignaturePad.HiddenInput />
</SignaturePad.Root>;

API Reference

SignaturePadRoot

The root container for the signature pad.

Prop	Type	Default
asChild	`boolean`	`false`
defaultPaths	`string[]`	-
disabled	`boolean`	-
drawing	`DrawingOptions`	`{ size: 2, simulatePressure: true }`
ids	`Partial<{ root: string; control: string; hiddenInput: string; label: string }>`	-
name	`string`	-
onDraw	`(details: DrawDetails) => void`	-
onDrawEnd	`(details: DrawEndDetails) => void`	-
paths	`string[]`	-
readOnly	`boolean`	-
required	`boolean`	-
translations	`IntlTranslations`	-

SignaturePadRootProvider

Provides the signature pad state created with useSignaturePad to its child components.

Prop	Type	Default
value	`UseSignaturePadReturn`	required
asChild	`boolean`	`false`

SignaturePadLabel

The accessible label for the signature pad.

Prop	Type	Default
asChild	`boolean`	`false`

SignaturePadControl

Contains the signature drawing surface and its controls.

Prop	Type	Default
asChild	`boolean`	`false`

SignaturePadSegment

Renders the SVG drawing surface for the signature paths.

Prop	Type	Default
asChild	`boolean`	`false`

SignaturePadClearTrigger

Clears all signature paths.

Prop	Type	Default
asChild	`boolean`	`false`

SignaturePadGuide

Renders a visual guide beneath the signature drawing surface.

Prop	Type	Default
asChild	`boolean`	`false`

SignaturePadHiddenInput

A hidden native input containing the signature value for form submission.

Prop	Type	Default
value	`string`	required
asChild	`boolean`	`false`

SignaturePadContext

Provides the signature pad API to a render function.

Prop	Type	Default
value	`(UseSignaturePadReturn) => ReactNode`	required