# SignaturePad

Source: https://lumeo.nativ.sh/components/signature-pad

# 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

Preview Code

Basic

Sign here

Copy Code

Preview Code

Custom stroke

Sign here

Copy Code

Preview Code

With download

Sign and click download

Copy Code

Preview Code

Disabled / read-only

Copy Code

## 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](/components/file-upload) — Pair to also accept a pre-scanned signature image
-   [Image](/components/image) — Display the captured data URL in read-only contexts
-   [RichTextEditor](/components/rich-text-editor) — Use when you need a full document-style annotation surface instead of a fixed-size pad