e8-form-signature-pad
Updated on Sep 18, 2025 27 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="200"
thumbnail-size="100"
background-color="#ffffff"
line-color="#000000"
:as-base64="true"
: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. |