Signature Pad
proCanvas-based signature pad that uploads the signature as SVG.
Overview
The Signature Pad lets users draw their signature using mouse or trackpad. The signature is captured as SVG, uploaded to a configurable endpoint, and the resulting URL is stored in the form data.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
name | String | "signature" | Field name used in form data. |
label | String | "Signature" | Label displayed above the pad. |
height | Number | 200 | Canvas height in pixels. |
strokeColor | Color | "#111111" | Ink color for drawing. |
lineWidth | Number | 2 | Stroke width (1-8). |
helperText | String | "Sign with your mouse or trackpad" | Placeholder text when empty. |
clearLabel | String | "Clear" | Text on the clear button. |
uploadUrl | String | "https://framerformkit.com/api/formkit/upload" | API endpoint for saving the signature. |
required | Boolean | false | Whether a signature must be provided. |
Features
- Canvas-based drawing with @uiw/react-signature
- Auto-uploads signature as SVG to configurable endpoint
- 1-second debounced upload (avoids spam during multi-stroke drawing)
- Clear button with configurable label
- Upload status indicator
- Shows existing signature as image when value exists
Tips
The default upload URL points to the FormKit API. You can use your own endpoint if preferred.
Signatures are stored as URLs pointing to the uploaded SVG.