---
title: "Signature Component"
slug: "signature-component"
tags: ["module-builder", "module-builder-components"]
updated: 2026-09-15T18:13:43Z
published: 2026-09-15T18:13:43Z
canonical: "docs.unqork.io/signature-component"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Signature Component

The Signature component captures a handwritten signature from end-users using a drawing canvas. The signature is stored as an image value in module data.

> **How to read settings tables**
> 
> The tables below describe each configurable option as it displays in the UnqorkAI platform. Values are formatted as follows: `inline code` — a value to type exactly as shown | **Bold** — a value selected from a drop-down, radio button, tab, or choice chip | **ON**/**OFF** — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked

## General Settings

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Property ID | `key` | Text input | `sign` | The unique identifier for this component instance. |

## Display Settings

### Default State Options

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Hide Field | `hidden` | Toggle | OFF | Hides the component from end-users but always displays in the Module Builder. |

### Formatting

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Footer Label | `footer` | Text input | `Sign above` | Text displayed below the signature drawing area to guide end-users. |
| Background Color | `backgroundColor` | Text input | `rgb(245,245,235)` | The background color of the signature canvas, specified as an RGB value. |
| Set Width | `width` | Text input | `100` | Sets the width of the signature drawing area. |
| Width Unit | — | Drop-down | **%** | Sets the unit for the width value. Required. Options include: **px** or **%**. |
| Set Height | — | Number input | `150` | Sets the height of the signature drawing area in pixels (px). |

### Input Behavior

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Behavior | — | Drop-down | **Enable User Input** | Sets how end-users can interact with the field. |

> - **Enable User Input** (default): End-users can draw a signature.
> - **Disable User Input** (`disabled`): Prevents end-users from drawing a signature. The field displays with an altered appearance to indicate it is not editable.
> - **Read Only - Legacy** (`readOnlyView`): Displays the stored signature value as plain text without the drawing canvas. Shows `None` when empty.

## Data Settings

### Data Storage

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Store Data in Database | `persistent` | Toggle | ON | When set to **ON**, this setting this setting stores field values to the database when the module saves, end-users navigate between Panel components, or end-users navigate between workflow screens. Set to **OFF** to exclude this field from server-side submissions. |

> [!NOTE]
> Fields with **Store Data in Database** set to **OFF** are excluded from Plug-In component's API responses and Unqork's built-in tracker. When using a Plug-In component to remote-execute a module, any component whose value must be included in the API response requires **Store Data in Database** set to **ON**.

## Validation Settings

### User Input

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Required | `validate.required` | Toggle | OFF | Requires a signature before the module can be submitted. |
| Required Error Message | `errors.required` | Text input | `is required` | Displays when the required field has no signature. |

## Advanced Settings

### Additional Styling

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Custom CSS Class | `customClass` | Text input | — | A CSS class applied to the component for custom styling. |

---

**Changelog**

| Date | Change |
| --- | --- |
| — | Initial publication. |

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

The Number data type accepts integer or floating point values. The number data type does not use quotes around numerical values.

The VCS (version control system) Contributor role has permissions to edit modules in a branch. Set contributors during the VCS Create a Branch process.

APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services.

Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.