SignaturePad
A canvas-backed component for capturing handwritten signatures via mouse, touch, or stylus.
When to Use
- Capture handwritten signatures for contracts, releases, delivery confirmations, or consent forms
- Collect freehand annotations as raster images (PNG / JPEG data URLs)
- Display a previously captured signature in read-only mode for audit or review
- Offer instant clear + optional download from inside the pad itself
- Use as a lightweight drawing primitive when a full canvas editor would be overkill
Sign here
Sign here
Sign and click download
API Reference
SignaturePad
| Property | Type | Default | Description |
|---|---|---|---|
| Value | string? | null | Data URL of the captured signature. Use with @bind-Value for two-way binding. |
| ValueChanged | EventCallback<string?> | — | Fires when the user finishes a stroke or clears the pad, with the new data URL (or null on clear). |
| Width | int | 500 | Canvas width in CSS pixels. |
| Height | int | 200 | Canvas height in CSS pixels. |
| StrokeColor | string | "currentColor" | CSS color used for drawn strokes. Accepts any canvas-compatible color string. |
| StrokeWidth | double | 2.0 | Stroke thickness in CSS pixels. |
| BackgroundColor | string | "transparent" | Canvas background painted before strokes. Use "white" when exporting JPEG. |
| ShowClearButton | bool | true | Shows the built-in Clear button below the pad. |
| ShowDownloadButton | bool | false | Shows a Download button that saves the signature as an image. |
| Format | string | "png" | Output image format. Values: "png", "jpeg", "webp". |
| Disabled | bool | false | Prevents drawing and hides interactive controls. Use to display a previously captured signature. |
| Placeholder | string? | "Sign here" | Hint text shown inside the empty pad. |
| OnSign | EventCallback | — | Fires after the user completes a stroke and a fresh data URL is available. |
| OnClear | EventCallback | — | Fires when the pad is cleared (programmatically or via the Clear button). |
| Class | string? | null | Additional CSS classes appended to the root element. |
| AdditionalAttributes | Dictionary<string, object>? | null | Splatted onto the root element for arbitrary HTML attributes. |
Related Components
- FileUpload — Pair to also accept a pre-scanned signature image
- Image — Display the captured data URL in read-only contexts
- RichTextEditor — Use when you need a full document-style annotation surface instead of a fixed-size pad