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

Typed Signature Pad

Typed Signature Pad lets users type initials, names, or short signature text and emits the rendered result as an image data URL. Use it in PDF signing, approval, onboarding, consent, checkout, and document workflows where users can provide a typed signature instead of drawing one.

Use it for:
  • Capturing typed initials or signature text from the keyboard.
  • Letting users choose a signature font and a color palette.
  • Emitting signature metadata with the typed value, font family, color, and SVG data URL.
  • Clearing the typed signature through the same compact control surface as Signature Pad.

Do not use Typed Signature Pad as a legal validation system by itself. App code should still require the signature when needed, persist the emitted image data URL, attach it to the workflow or document, and enforce backend or legal rules.

PropTypeDefault
value
The typed signature text.
model<string>''
fontFamily
The font family used to render the typed signature.
model<string>Brush Script MT, Segoe Script, cursive
penColor
The color used to render the typed signature.
model<string>#000
placeholder
Placeholder text shown before the user types.
stringType signature
colors
The available colors in the color switcher.
string[]['#000', '#0059ff', '#ff0000']
fonts
The available font choices in the font menu.
readonly TypedSignatureFont[]Signature, Handwritten, Script, Classic
EventType
signatureSaved
Emitted with the rendered typed signature SVG data URL.
string
signatureTyped
Emitted with the typed value, font family, color, and SVG data URL.
TypedSignaturePadValue
signatureCleared
Emitted when the typed signature is cleared.
void
InterfaceShape
TypedSignatureFont
A font option shown in the font menu.
readonly label: string; readonly family: string;
TypedSignaturePadValue
The typed signature payload emitted by signatureTyped.
readonly value: string; readonly fontFamily: string; readonly color: string; readonly dataUrl: string;