---
title: "Signature Component"
slug: "signature-component"
updated: 2025-12-04T19:17:48Z
published: 2025-12-04T19:17:48Z
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

UDesignerClassic Designer

The **Signature component** creates a signature field in your [module](/v1/docs/introduction-to-the-module-builder). In Express View, the signature field displays as a box where end-users can use their mouse to input their signature. In the [submission data](/v1/docs/submission-data), the signature stores as a Base64 string.

> [!CAUTION]
> Do not use the Signature component for legally-binding signatures. Instead, we suggest you use third-party software like [DocuSign](/v1/docs/docusign-integration-template) and [SignNow](/v1/docs/signnow-integration-template).

You'll find the component under the [Secondary Fields](/v1/docs/secondary-fields) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder):

## About the Configuration Window

> To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display Panel

### Default State Options

| Setting | Description |
| --- | --- |
| **Hide Field** | Displays or hides the component from view in Express View. Setting it to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(ON)** hides the component. Setting the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(OFF)** displays the component. The component is always visible in the Module Builder. By default, Hide Field is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(OFF)** |

### Formatting

| Setting | Description |
| --- | --- |
| **Footer Label** | Like the label text, a component’s Footer Label indicates the purpose of the corresponding field or component. Placed under the Signature box, the Footer Label tells the end-user how to interact with the field. For example, giving the end-user instructions like **Sign your name above**. User-friendly labels make your module more accessible. Keep labels short, concise, and descriptive using title case. For longer entries, use sentence case. |
| **Background Color** | You can customize the background color of the signature box using an HTML color picker. Enter the color’s RGB code in the Background Color field. For example, rgb (245,245,235). Your chosen color displays in the Module Builder and Express View. |
| **Set Width** | Adjusts the width of the Signature box. The width value is specified in conjunction with the **Width Unit** type. |
| **Width Unit** | Select the unit type for the Width value. Width Unit types include: - **px (Pixel)**: Sets the signature box width to an absolute value in pixels. The value range is 0px to 9999px. - **% (Percentage)**: Sets the signature box width to a percentage of the column or page. The value range is 0% to 100%. By default, the width unit type is set to **% (Percentage)**. |
| **Set Height** | This setting adjusts the height of the signature box. Set the number of pixels to apply to the box height. |

[![A static image displaying the Menu component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display_thumb_0_0(9).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display(9).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)

### Input Behavior

| Setting | Description |
| --- | --- |
| **Input Behavior** | Controls how end-users interact with the component. Choose from the following options: - **Enable User Input**: Allow end-users to view and enter data in this field. - **Disable User Input**: Prevents end-users from entering data in the field, but lets them view it. In the Module Builder, the field’s background displays as gray. In Express View, when end-users hover over the field, their cursor displays with a **prohibited** symbol. - **Read Only - Legacy**: Prevents end-users from entering data and replaces the field with the component’s data value. If no value is provided, the component displays None. |

## Data Panel

### Data Storage

| Setting | Description |
| --- | --- |
| **Store Data in Database** | The Store Data in Database setting affects how data persists through your application. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(ON)**, Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios: - Navigating between Panels in a Navigation component. On navigation between pages (Panels), the component’s value saves to the database. - Triggering a module save event using a Button component with an Action Type of Save. - Navigating between screens of a workflow. On navigation between screens, the component’s value saves to the database. > [!NOTE] > By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission. Set the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(OFF)** when you don’t want to store the values from this field in the database. > [!NOTE] > When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response. > [!TIP] > Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the **Enable Tracker** and **Track Value** toggles are set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(ON)** in Module Settings, only values from fields with Store Data in Database enabled are tracked. By default, this toggle is set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(ON)**. |

[![A static image displaying the Signature component's Data settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/A03008_Signature_Data%20Panel_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/A03008%20Signature%20Data%20Panel.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)

## Validation Panel

### User Input

| Setting | Description |
| --- | --- |
| **Required** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(ON)**, the end-user must enter a value in the component's visible fields. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(OFF)**, the input is optional. By default, Required is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(OFF)**. |
| **Required Error Message** | A custom error message that displays below a required field. The error message displays when the end-user tries to save or submit the module without completing the required field. |

[![A static image displaying the Signature Component's Validation Settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/A03008_Signature_Validation%20Panel_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/A03008%20Signature%20Validation%20Panel.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)

## Advanced Panel

### Additional Styling

| Setting | Description |
| --- | --- |
| **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |

[![The Signature component's Advanced Settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/A03008_Signature_AdvancedPanel_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/A03008%20Signature%20AdvancedPanel.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)

## Adding a Signature Component

Configure a Signature component to provide a signature field for an end-user. We'll use a light blue color for the field background and set the component as `Required`. These instructions assume that you have an open module saved with a title.

1. In the Module Builder, drag and drop a **S****ignature** component onto your canvas.
2. In the Property ID field, enter **sign**.
3. In the **Footer Label** field, enter `Sign above`.
4. In the **Background Color** field, enter `rgb(204,245,255)`. This color makes the field background light blue.

[![A static image displaying the Signature component's configuration window, the Footer Label and Background Color fields are highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/A03008_SignatureComponent_Configuration_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/A03008%20SignatureComponent%20Configuration.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)
5. Navigate to the **Advanced** settings.
6. Set **Required** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(ON)**.
7. Click **Save Component**.
8. **Save** your module.

Preview your module in Express View. You'll see the following functionality:

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Signature_Component_ExpressView.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)

The **Signature component** creates a signature field in your [module](/v1/docs/introduction-to-the-module-builder). In Express View, the signature field displays as a box where end-users can use their mouse to input their signature. In the [submission data](/v1/docs/submission-data), the signature stores as a Base64 string.

> [!CAUTION]
> Do not use the Signature component for legally-binding signatures. Instead, we suggest you use third-party software like [DocuSign](/v1/docs/docusign-integration-template) and [SignNow](/v1/docs/signnow-integration-template).

You'll find the component under the [Secondary Fields](/v1/docs/secondary-fields) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder):

## About the Configuration Window

> To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display Panel

[![A static image displaying the Signature Component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Signature_Component_Display_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Signature%20Component%20Display.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)

### Field Text

| Setting | Description |
| --- | --- |
| **Footer Label** | Like the label text, a component’s Footer Label indicates the purpose of the corresponding field or component. Placed under the Signature box, the Footer Label tells the end-user how to interact with the field. For example, giving the end-user instructions like **Sign your name above**. User-friendly labels make your module more accessible. Keep labels short, concise, and descriptive using title case. For longer entries, use sentence case. |

### Default State Options

| Setting | Description |
| --- | --- |
| **Disable User Input** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(ON)**, end-users cannot interact with or edit the Express View's input field or element. When end-users hover over the field, their cursor changes to alert them to the status change. By default, Disable User Input is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(OFF)**. |
| **Read Only View** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(ON)**, the component is display-only. If another component sends content to the field, the end-user can view that content. Otherwise, end-users see the word None. By default, the Read Only View toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(OFF)**. |
| **Hide Field** | Displays or hides the component from view. Setting Hide Field to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(ON)** hides the component in Express View. Setting it to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(OFF)** displays the component. The component is always visible in the Module Builder. By default, Hide Field is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(OFF)**. |

### Formatting

| Setting | Description |
| --- | --- |
| **Set Width** | Adjusts the width of the Signature box. The width value is specified in conjunction with the **Width Unit** type. |
| **Width Unit** | Select the unit type for the Width value. Width Unit types include: - **px (Pixel)**: Sets the signature box width to an absolute value in pixels. The value range is 0px to 9999px. - **% (Percentage)**: Sets the signature box width to a percentage of the column or page. The value range is 0% to 100%. By default, the width unit type is set to **% (Percentage)**. |
| **Set Height** | This setting adjusts the height of the signature box. Set the number of pixels to apply to the box height. |
| **Background Color** | You can customize the background color of the signature box using an HTML color picker. Enter the color’s RGB code in the Background Color field. For example, rgb (245,245,235). Your chosen color displays in the Module Builder and Express View. |

## Data Panel

[![A static image displaying the Signature component's Data settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Signature_Component_Data_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Signature%20Component%20Data.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)

#### Data Storage

| Setting | Description |
| --- | --- |
| **Store Data in Database** | The Store Data in Database setting affects how data persists through your application. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(ON)**, Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios: - Navigating between Panels in a Navigation component. On navigation between pages (Panels), the component’s value saves to the database. - Triggering a module save event using a Button component with an Action Type of Save. - Navigating between screens of a workflow. On navigation between screens, the component’s value saves to the database. > [!NOTE] > By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission. Set the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(OFF)** when you don’t want to store the values from this field in the database. > [!NOTE] > When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response. > [!TIP] > Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the **Enable Tracker** and **Track Value** toggles are set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(ON)** in Module Settings, only values from fields with Store Data in Database enabled are tracked. By default, this toggle is set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(ON)**. |

## Validation Panel

[![A static image displaying the Signature Component's Validation Settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Signature_Component_Validation_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Signature%20Component%20Validation.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)

### User Input

| Setting | Description |
| --- | --- |
| **Required** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(ON)**, the end-user must enter a value in the component's visible fields. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(OFF)**, the input is optional. By default, Required is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(OFF)**. |
| **Required Error Message** | A custom error message that displays below a required field. The error message displays when the end-user tries to save or submit the module without completing the required field. |

## Advanced Panel

[![The Signature component's Advanced Settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Signature_Component_Advanced_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Signature%20Component%20Advanced.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)

### Additional Styling

| Setting | Description |
| --- | --- |
| **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |

## Adding a Signature Component

Let's configure a Signature component to provide a signature field for your end-user. We'll use a light blue color for the field background and set the component as Required. These instructions assume that you have an open module saved with a title.

1. In the Module Builder, drag and drop a **S****ignature** component onto your canvas.
2. In the Property ID field, enter **sign**.
3. In the **Footer Label** field, enter `Sign above`.
4. In the **Background Color** field, enter `rgb(204,245,255)`. This color makes the field background light blue.

[![A static image displaying the Signature component's configuration window, the Footer Label and Background Color fields are highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Signature_Component_example01_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Signature%20Component%20example01.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)
5. From the Signature component configuration window, click the **![Advanced Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Advanced(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) Advanced** tab.
6. Set **Required** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D) **(ON)**.
7. Click **Save & Close**.
8. **Save** your module.

Preview your module in Express View. You'll see the following functionality:

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Signature_Component_ExpressView.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)

## Structure of a Signature Component's Data

A signature component stores its data as key/value pair. The value contains the data type and the signature in Base64 format.

[![A static image displaying the Developer console. The Angular Command displays the Submission Contol, the Signature component's data is displayed.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Signature_Component_DataStructure_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Signature%20Component%20DataStructure.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A49Z&se=2026-11-07T18%3A57%3A49Z&sr=c&sp=r&sig=P4%2FfzGFDQx3KnxEveHTu3B13K%2F5UpBtJoMqALYHZJjU%3D)

## Resources

- [Modify the Signature component using the toolbar settings](/v1/docs/component-toolbar-settings).
- [Get help in the Community Hub](https://community.unqork.com/search?q=signature).

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

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.

Base64 is an encoding and decoding technique used to convert binary data to an ASCII (American Standard for Information Interchange) text format.

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

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.