Component reference
Signature
Capture a signature for a contract workflow.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Draw your signature with a mouse, pen or touch. The Clear button starts over and Delete clears from the keyboard.
Draw your signature with a mouse, pen or touch. Press Delete to clear and Control Z to undo.
Width adapts to the available space
"use client";
import { useState } from "react";
import { Signature, Badge, Button } from "@pimolu/react";
function ContractSignature() {
const [signature, setSignature] = useState<string | null>(null);
return (
<div className="grid gap-5 min-w-0">
<Signature
label="Authorised signature"
description={(
"Draw your signature with a mouse, pen or touch. The Clear " +
"button starts over and Delete clears from the keyboard."
)}
value={signature}
onChange={setSignature}
undo
/>
<div className="flex flex-wrap items-center gap-3 min-w-0">
<Badge variant={signature ? "success" : "secondary"}>
{
signature
? "Signature captured"
: "Not signed yet"
}
</Badge>
<Button
size="sm"
appearance="ghost"
disabled={signature === null}
onClick={() => setSignature(null)}
>
Reset agreement
</Button>
</div>
</div>
);
}
export function DemoExample() {
return (<ContractSignature />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Basic
Draw inside the dashed area. The clear and undo actions live under the pad, and the canvas itself is focusable for keyboard clearing.
States
Read-only displays an existing signature without accepting input. Disabled blocks drawing and dims the pad.
Examples
Two real documents that need a handwritten mark.
Usage
A canvas result is image data; legal consent, identity verification and storage belong to the application.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluSignatureProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
id | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
value | string | null | undefined | — | Controlled signature as a PNG data URL, or `null` when empty. |
defaultValue | string | null | undefined | — | Initial signature when uncontrolled. |
onChange | ((dataUrl: string | null) => void) | undefined | — | Called after each stroke and on clear/undo with the latest data URL, or `null` when the pad is empty or a canvas export is unavailable. |
width | number | undefined | 600 | Drawing area width in CSS pixels. Defaults to 600. |
height | number | undefined | 200 | Drawing area height in CSS pixels. Defaults to 200. |
penColor | string | undefined | #111827 | CSS colour used for new strokes. Defaults to #111827. |
backgroundColor | string | undefined | #ffffff | CSS colour of the pad. Defaults to #ffffff. |
lineWidth | number | undefined | 2 | Stroke thickness in CSS pixels. Defaults to 2. |
disabled | boolean | undefined | false | Public Pimolu prop; see the source declaration for details. |
readOnly | boolean | undefined | false | Public Pimolu prop; see the source declaration for details. |
label | string | undefined | — | Visible label associated with the control. |
description | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
clearLabel | string | undefined | "Clear signature" | Visible clear button label. Defaults to "Clear signature". |
undo | boolean | undefined | false | Show an undo button that removes the last stroke. |
onEnd | ((dataUrl: string | null) => void) | undefined | — | Called at the end of each stroke with the exported data URL. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
style | CSSProperties | undefined | — | Public Pimolu prop; see the source declaration for details. |
aria-label | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
idstring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
valuestring | null | undefinedNo default extracted.
Controlled signature as a PNG data URL, or `null` when empty.
defaultValuestring | null | undefinedNo default extracted.
Initial signature when uncontrolled.
onChange((dataUrl: string | null) => void) | undefinedNo default extracted.
Called after each stroke and on clear/undo with the latest data URL, or `null` when the pad is empty or a canvas export is unavailable.
widthnumber | undefinedDefault: 600
Drawing area width in CSS pixels. Defaults to 600.
heightnumber | undefinedDefault: 200
Drawing area height in CSS pixels. Defaults to 200.
penColorstring | undefinedDefault: #111827
CSS colour used for new strokes. Defaults to #111827.
backgroundColorstring | undefinedDefault: #ffffff
CSS colour of the pad. Defaults to #ffffff.
lineWidthnumber | undefinedDefault: 2
Stroke thickness in CSS pixels. Defaults to 2.
disabledboolean | undefinedDefault: false
Public Pimolu prop; see the source declaration for details.
readOnlyboolean | undefinedDefault: false
Public Pimolu prop; see the source declaration for details.
labelstring | undefinedNo default extracted.
Visible label associated with the control.
descriptionstring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
clearLabelstring | undefinedDefault: "Clear signature"
Visible clear button label. Defaults to "Clear signature".
undoboolean | undefinedDefault: false
Show an undo button that removes the last stroke.
onEnd((dataUrl: string | null) => void) | undefinedNo default extracted.
Called at the end of each stroke with the exported data URL.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
styleCSSProperties | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
aria-labelstring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
Accessibility
- Provide clear/reset controls and an alternative signing workflow for users who cannot draw.