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.

Interactive examples

Explore live examples that show how the library behaves in common Angular use cases.

Signature

Sign with the keyboard: arrow keys move the pen, holding Shift moves it further, Space or Enter lowers and lifts it, and Escape discards the stroke in progress.

Draw with a mouse, touch screen or pen.

Transloco and ngx-translate

Sign with the keyboard: arrow keys move the pen, holding Shift moves it further, Space or Enter lowers and lifts it, and Escape discards the stroke in progress.

Draw with a mouse, touch screen or pen.

Signing with the keyboard

Sign with the keyboard: arrow keys move the pen, holding Shift moves it further, Space or Enter lowers and lifts it, and Escape discards the stroke in progress.

Tab into the box, then use the keys below.
  • ←↑↓→Move the pen
  • Shift + →Move it further
  • Space / EnterLower the pen, then lift it and commit the stroke
  • EscDiscard the stroke in progress
Not signed yet

Signature as a form control

Sign with the keyboard: arrow keys move the pen, holding Shift moves it further, Space or Enter lowers and lifts it, and Escape discards the stroke in progress.

Sign inside the box with a pointer or the keyboard.

Draw events and stroke data

Sign with the keyboard: arrow keys move the pen, holding Shift moves it further, Space or Enter lowers and lifts it, and Escape discards the stroke in progress.

Sign with the keyboard: arrow keys move the pen, holding Shift moves it further, Space or Enter lowers and lifts it, and Escape discards the stroke in progress.

Empty

Sizing the surface and the pen

Sign with the keyboard: arrow keys move the pen, holding Shift moves it further, Space or Enter lowers and lifts it, and Escape discards the stroke in progress.

Nothing signed yet

Placing the label

Sign with the keyboard: arrow keys move the pen, holding Shift moves it further, Space or Enter lowers and lifts it, and Escape discards the stroke in progress.

Draw with a mouse, touch screen or pen.

Sign with the keyboard: arrow keys move the pen, holding Shift moves it further, Space or Enter lowers and lifts it, and Escape discards the stroke in progress.

Draw with a mouse, touch screen or pen.

Naming one field on its own

Authorised signatory

Sign with the keyboard: arrow keys move the pen, holding Shift moves it further, Space or Enter lowers and lifts it, and Escape discards the stroke in progress.

Sign with the keyboard: arrow keys move the pen, holding Shift moves it further, Space or Enter lowers and lifts it, and Escape discards the stroke in progress.

Helper text and errors as markup

Sign with the keyboard: arrow keys move the pen, holding Shift moves it further, Space or Enter lowers and lifts it, and Escape discards the stroke in progress.

Sign with a pointer, or carry the pen with the arrow keys and lower it with Space.