Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

SignaturePad

A composable signature input with pressure-aware SVG ink, undo and redo, native forms, saved previews, and image or JSON export.

CoreAdvanced Inputs@gaudi/design-system/core/SignaturePadView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { SignaturePad } from '@gaudi/design-system/core/SignaturePad';

Usage

import { SignaturePad, SignaturePadArea, SignaturePadGuide, SignaturePadPlaceholder, SignaturePadUndo, SignaturePadRedo, SignaturePadClear, SignaturePadSave } from '@gaudi/design-system/core/SignaturePad';
<SignaturePad name='signature' required onValueChange={setStrokes}>  <SignaturePadArea aria-label='Recipient signature'>    <SignaturePadGuide />    <SignaturePadPlaceholder />  </SignaturePadArea>  <div className='flex flex-wrap gap-2'>    <SignaturePadUndo />    <SignaturePadRedo />    <SignaturePadClear />    <SignaturePadSave format='svg' onSave={handleSave} />  </div></SignaturePad>

Examples

Playground

Storybook

Native Form

Storybook

Draw Or Type

Storybook

Export Formats

Storybook

Controlled And Stylus

Storybook

API

26 props

Accessibility

Give the area a visible label and useful instructions. Drawing requires a pointer, so compose a typed-name alternative with Core Tabs and Input when the workflow needs keyboard-only entry. Undo/redo shortcuts apply only within the area, respect editable overlays and IME, and do not capture page shortcuts. Cancel a live stroke with Escape. Clear and exhausted history controls return focus to the area.

Notes

  • Compose SignaturePadArea inside SignaturePad; guide, placeholder, controls, and save actions are optional.
  • Store the stroke array to reopen and edit a signature. A changed controlled value clears history; an equivalent deep copy preserves it.
  • Applications own consent, document identity, validation policy, upload, persistence, and any signing audit trail.
TabsSwitch between related panels with keyboard-accessible tab controls.3 examplesInputText, search, numeric and date inputs with prefix and suffix slots.11 examplesPreviewPreview renders inline link previews for markdown links transformed by the blog MDX pipeline. It is the MDX adapter over the Core LinkPreview, which owns the rich, type-aware rendering.