e8-form-signature-pad
Updated on Sep 18, 2025 4 minutes to readA signature capture component that allows users to draw, edit, and manage digital signatures.
Supports image preview, file uploads, downloads, and base64 storage.
Overview
e8-form-signature-pad provides a complete digital signature input solution.
Users can sign directly on a canvas, review the result, download the image, or replace or remove an existing signature.
It integrates seamlessly with modals, upload endpoints, and image previews.
<e8-form-signature-pad
v-model="vars.signature"
label="Signature"
tooltip="Please draw your signature"
height="200px"
thumbnail-size="100"
background-color="#ffffff"
line-color="#000000"
:keep-aspect-ratio="true"
:trim="true"
owner-script-alias="lstExample"
attr-script-alias="signature"
></e8-form-signature-pad>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| alt | Alternate text for the image element. | string | — |
| as-base64 | Stores signature as a Base64 string instead of uploading it. | boolean | false |
| attr-script-alias | Script alias for attribute-based upload endpoint. | E8ScriptAlias | — |
| background-color | Background color as a hex string of the signature canvas. | string | '#00000000' |
| deletion-confirmation | Requires confirmation before deleting a signature. | boolean | true |
| downloading-disabled | Disables signature download functionality. | boolean | false |
| editing-disabled | Disables the ability to edit the signature. | boolean | false |
| form-size | Modal size. | FormSize | 'large' |
| group | Preview group name used by the image viewer. | string | '' |
| height | Height of the signature pad (number or string). | number | string | '200px' |
| keep-aspect-ratio | Maintains image aspect ratio in preview. | boolean | false |
| label | Field label text; set to false to hide label. | string | boolean | — |
| line-color | Pen color as a hex string used for drawing signatures. | string | '#000000' |
| owner-script-alias | Script alias for owner object upload endpoint. | E8ScriptAlias | — |
| readonly | Makes the component non-editable. | boolean | false |
| removing-disabled | Disables removal of an existing signature. | boolean | false |
| show-download-button | Displays the download option in the menu. | boolean | true |
| thumbnail-size | Thumbnail size (in pixels). | number | 80 |
| tooltip | Tooltip text displayed below the field. | string | — |
| trim | Crops whitespace around the signature. | boolean | false |
| v-model | Two-way bound signature value. | string | number | null | — |
| viewing-disabled | Disables image preview. | boolean | false |
| visible | Controls component visibility. | boolean | true |
Slots
| Slot | Description |
|---|---|
| default | Content inserted inside the signature modal (above the canvas). |
| label | Custom label slot. Provides { label, value } as slot props. |
Events
| Event | Description |
|---|---|
| on-change | Emitted when the signature value changes. |
| on-modal-hidden | Triggered when the signature modal is closed. |
| on-modal-shown | Triggered when the signature modal is opened. |