opinion
SignaturePad
A canvas to sign on, with optional typed-name and upload paths.
Sign hereDraw with a pointer or finger
Nothing drawn yet.
In context
Approve artworkSign-off is blocked until there is a signature
Approve depot fasciadepot-fascia-final.pdf, 1.4 MB
ReviewSigning approves the artwork for print at the three northern depots.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
value | string | undefined | No | — |
onValueChange | ((value: string) => void) | undefined | No | — |
width | number | undefined | No | 400 |
height | number | undefined | No | 160 |
penColor | string | undefined | No | #212121 |
backgroundColor | string | undefined | No | #ffffff |
disabled | boolean | undefined | No | — |
markDisabled | boolean | undefined | No | — |
clearLabel | string | undefined | No | Clear |
allowUpload | boolean | undefined | No | — |
uploadLabel | string | undefined | No | Upload |
allowTypedName | boolean | undefined | No | — |
defaultTypedName | string | undefined | No | |
typedNamePlaceholder | string | undefined | No | Type your name |
typedNameFont | string | undefined | No | 'Brush Script MT', 'Segoe Script', cursive |
onTypedNameChange | ((name: string) => void) | undefined | No | — |
stamp | SignaturePadStamp | undefined | No | — |
actionsEnd | ReactNode | No | — |
aria-label | string | undefined | No | Signature |
className | string | undefined | No | — |
data-rebar-* attributes
data-rebar-component="signature-pad" on the root, present with data-rebar-empty while nothing has been drawn; parts: typed-name, canvas, actions, clear, upload.
Migrating to Ant Design
Not codemod-covered — AntD ships no dedicated signature-capture component; a migration typically keeps this exact canvas approach and re-skins the Clear button.