Signature
Signature allows users to provide a handwritten, typed, or uploaded signature with RTL support.
Loading preview…
1
'use client';2
3
import { Signature } from 'sdaia-ui';4
5
export default function SignatureRealWorld() {Installation
npx sdaia-ui@latest add signature
Usage
import { Signature } from "@/components/ui/signature"<Signature type="draw" />Examples
Draw
Freehand drawn signature using mouse or touch input.
Loading preview…
1
<Signature2
defaultType="draw"3
onAccept={(data) => console.log('Signature accepted', data)}4
onCancel={() => console.log('Cancelled')}5
/>Text
Signature generated from typed text.
Loading preview…
1
<Signature2
defaultType="text"3
onAccept={(data) => console.log('Signature accepted', data)}4
onCancel={() => console.log('Cancelled')}5
/>Upload
Signature uploaded as an image file.
Loading preview…
1
<Signature2
defaultType="upload"3
onAccept={(data) => console.log('Signature accepted', data)}4
onCancel={() => console.log('Cancelled')}5
/>API Reference
SignatureProps
Props for the Signature component.
Prop | Type | Default | Required |
|---|---|---|---|
type | 'draw' | 'text' | 'upload' | - | optional |
defaultType | 'draw' | 'text' | 'upload' | 'draw' | optional |
onTypeChange | (type: SignatureType) => void | - | optional |
helperText | string | "By signing this document, I certify that I have reviewed and accepted the agreement." | optional |
showHelperText | boolean | true | optional |
showOptions | boolean | true | optional |
showTabs | boolean | true | optional |
cancelLabel | string | 'Cancel' | optional |
acceptLabel | string | 'Accept and Sign' | optional |
onCancel | () => void | - | optional |
onAccept | (data?: string | File) => void | - | optional |
className | string | - | optional |