signature input

Signature Input

Signature Input

Canvas-based signature input that returns a PNG data URL.

Preview

Features

  • Mouse and touch support.
  • Clear action built in.
  • Works with react-hook-form via onSignatureChange.

Installation

npx shadcn@latest add https://www.shadcn-form.com/registry/signature-input.json

Registry JSON: /registry/signature-input.json

Usage

import * as React from 'react'
import SignatureInput from '@/components/ui/signature-input'


const canvasRef = React.useRef<HTMLCanvasElement>(null)


<SignatureInput
  canvasRef={canvasRef}
  onSignatureChange={(dataUrl) => setValue(dataUrl)}
/>