Angular Signature Pad | ng-hub-ui-signature

Accessible Angular signature field that stores mouse, touch and pen input as scalable SVG form values, with undo, redo and PNG export.

Last updated Aug 14, 2026

Overview

Why teams search for this library

Use ng-hub-ui-signature when a form needs a reusable signature surface without losing accessibility, responsive rendering or portable form data.

Install

npm install ng-hub-ui-signature

Jump to

Ideal for

  • contract acceptance
  • delivery confirmation
  • consent forms
  • approval workflows

About signature

ng-hub-ui-signature is a standalone Angular form field built on Pointer Events. It captures mouse, touch and pen strokes, preserves them as an SVG ControlValueAccessor value, restores saved signatures, and provides clear, undo, redo and PNG export. Its --hub-signature-* tokens inherit the ng-hub-ui-forms field contract so the label, border, radius and focus treatment match the rest of a form.

Feature guides

Capture and edit signatures

Pointer input works with a mouse, touch screen or pen, then keeps a scalable SVG history for undo, redo and form persistence.

Examples:
Signature

Draw a signature and use the built-in history actions.

Draw with a mouse, touch screen or pen.
Code
Import:
Template:
Component:

Reactive external translations

The action-label contract accepts strings or reactive sources, so Transloco and ngx-translate language changes update the field without a direct package dependency.

Examples:
Transloco and ngx-translate

Bind reactive translation streams to update signature actions when the language changes.

Draw with a mouse, touch screen or pen.
Code
Import:
Template:
Component:

Key features

Recent changes

Version 22.1.0 - 8/14/26, 12:00 AM

fixed: The field now really inherits the ng-hub-ui-forms contract. The --hub-signature-* slots defaulted to a --hub-field-* family that no library declares, so they always fell through to their sys/ref fallbacks and a form themed with --hub-input-bg left its signature field untouched. They now read the canonical tokens of the .hub-field__* shell: --hub-input-* for the drawing surface, --hub-label-* for the label and --hub-form-disabled-opacity for the disabled state.

added: The eleven --hub-signature-* tokens are documented in the design-system token spec, so they now appear in the library reference table.

Version 22.0.0 - 8/14/26, 12:00 AM

added: Initial signature field release.

Related libraries

ng-hub-ui-forms ng-hub-ui-utils