Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
69
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Purchase

Signature Pad

Signature Pad lets users draw a handwritten signature and emits the result as a PNG data URL. Use it in approval, contract, consent, delivery confirmation, onboarding, checkout, legal acknowledgement, or internal workflow forms where the user must provide a drawn signature.

Use it for:
  • Capturing a signature with mouse, touch, or pen input.
  • Emitting signatureSaved with a base64 PNG data URL after drawing.
  • Clearing the captured signature with signatureCleared.
  • Configuring pen color, allowed colors, line width, background color, and lazy brush smoothing.

Do not use Signature Pad as a general drawing canvas, image editor, annotation tool, sketch board, whiteboard, file upload, typed-name field, or legal validation system by itself. App code should still require the signature when needed, store the emitted PNG, attach it to the workflow or document, and enforce backend or legal rules.

PropTypeDefault
penColor
The color of the pen stroke. Can be any valid CSS color string.
model<string>#000
lineWidth
The thickness of the pen stroke.
number4
backgroundColor
The background color of the signature pad.
stringtransparent
lazyRadius
The radius for the lazy brush effect. Higher values mean more smoothing.
number3
lazyFriction
The friction for the lazy brush effect.
number0.1
lazyEnabled
Whether to enable the lazy brush effect.
booleantrue
colors
The available colors in the color switcher.
string[]['#000', '#0059ff', '#ff0000']
EventDescription
signatureSaved
Emitted when a signature is saved. Returns the signature as a base64-encoded PNG data URL.
Emitted when a signature is saved. Returns the signature as a base64-encoded PNG data URL.
signatureCleared
Emitted when the signature pad is cleared.
Emitted when the signature pad is cleared.