---
title: "Protected Field Component"
slug: "protected-field-component"
updated: 2025-12-04T19:17:37Z
published: 2025-12-04T19:17:37Z
canonical: "docs.unqork.io/protected-field-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.

# Protected Field Component

UDesignerClassic Designer

The **Protected Field** is a Centauri (v1.0) component that masks data entered in Express View. Masking is useful when your end-user needs to enter PII they do not want the information to be seen, like a Social Security or account number.

Consider using a Protected Field component when:

- Preventing the field from being viewed in real-time by anyone other than your end-user. Using a Protected Field component helps prevent "shoulder surfing", which is when someone physically views the end-user's screen to collect information.
- You do not need to store sensitive data in the database. The Protected Field component does not include the **Store Data in Database** setting.

A Protected Field component works like a [Text Field](/v1/docs/text-field-component) or [Number](/v1/docs/number-component) component, but values entered in a Protected Field component do not display in the field. Instead, the field displays a substitute character, like asterisks or dots.

> [!WARNING]
> The Protected Field component does not support built-in encryption or other security features. It only masks the end-user's input in Express View. Therefore, the Protected Field component is not a good option for storing passwords.

You'll find the Protected Field 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 Settings

### Field Text

| Setting | Description |
| --- | --- |
| **Label Text** | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |
| **Placeholder Text** | A short prompt telling end-users the expected value of an input field. For example, `Enter your Social Security Number`. Placeholder Text displays inside the input field until the end-user begins an entry. |
| **Prefix** | Alphanumeric characters append to the start of the value entered in the field. If called by another component, the prefix stores with the value. |
| **Suffix** | Alphanumeric characters that append to the end of the value entered in the field. If called by another component, the suffix stores with the value. |

### Contextual Help

| Setting | Description |
| --- | --- |
| **Tooltip** | A quick tip describing the expected value of an input field. Unlike a Tooltip, Helper Text stays visible under the input field and displays on a single line. |

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

### Default State Options

| Setting | Description |
| --- | --- |
| **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%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%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%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%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%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D) **(OFF)**. |

### 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. |

## Validation Settings

### Input Required

| 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%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%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%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%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%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%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 dispaying the Protected Field component's Validation settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/validation_thumb_0_0(6).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/validation(6).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)

## Advanced Settings

### Additional Validation Options

| Setting | Description |
| --- | --- |
| **Min Length** | Sets the minimum number of characters that an end-user must enter for valid input. |
| **Min Length Error Message** | A custom error message that displays below the input field. The error message displays when the entry does not meet the minimum character length rule. |
| **Max Length** | Sets the maximum number of characters that an end-user must enter for valid input. |
| **Max Length Error Message** | A custom error message that displays below the input field. The error message displays when the entry does not meet the maximum character length rule. |

[![A static image dispaying the Protected Field component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced_thumb_0_0(7).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced(7).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%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 Protected Field Component

Configure a Protected Field component to collect an account number. You'll use validation settings to ensure the account number is exactly 10 characters in length. These instructions assume that you have an open module saved with a title.

1. In the Module Builder, drag and drop a **P****rotected Field** component onto your canvas.
2. In the Property ID field, enter **accountNumber**.
3. In the Label Text field, enter `Enter Account Number`.
4. In the **Min Length** and **Max Length** fields, enter `10`.
5. Navigate to the component's **Advanced** settings.
6. In the **Min Length Error Message** and **Max Length Error Message** fields, enter `Account number must be 10 digits long.`.

[![A static image displaying the Protected Field component's Advanced settings. The Min & Max Length fields, and the Min Length & Max Length Error message fields are highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/accountNumber_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/accountNumber.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)
7. Click **Save Component**.
8. **Save** your module.

**Preview** your module in Express View to see the following functionality:

[An animated image displaying the Protected Field component as seen in Express View, entering characters triggers the Validation message until 10 characters have been entered.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Protected_Field_Component_ExpressView.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)

The **Protected Field component** masks data entered in Express View. Masking is useful when your end-user needs to enter sensitive information like a Social Security or account number, and they don't want the information to be visibly seen.

Consider using a Protected Field component when:

- Preventing the field from being viewed in real-time by anyone other than your end-user. Using a Protected Field component helps prevent "shoulder surfing", which is when someone physically views the end-user's screen to collect information.
- You do not need to store sensitive data in the database. The Protected Field component does not include the **Store Data in Database** setting.

A Protected Field component works like a [Text Field](/v1/docs/text-field-component) or [Number](/v1/docs/number-component) component, but values entered in a Protected Field component do not display in the field. Instead, the field displays a substitute character, like asterisks or dots.

> [!WARNING]
> The Protected Field component does not support built-in encryption or other security features. It only masks the end-user's input in Express View. Therefore, the Protected Field component is not a good option for storing passwords.

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

## Display Panel

[![A static image dispaying the Protected Field component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Protected_Field_Component_Display_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Protected%20Field%20Component%20Display.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)

#### Field Text

| Setting | Description |
| --- | --- |
| **Label Text** | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |
| **Placeholder Text** | A short prompt telling end-users the expected value of an input field. For example, `Enter your Social Security Number`. Placeholder Text displays inside the input field until the end-user begins an entry. |
| **Prefix** | Alphanumeric characters append to the start of the value entered in the field. If called by another component, the prefix stores with the value. |
| **Suffix** | Alphanumeric characters that append to the end of the value entered in the field. If called by another component, the suffix stores with the value. |

#### Contextual Help

| Setting | Description |
| --- | --- |
| **Tooltip** | A quick tip describing the expected value of an input field. Unlike a Tooltip, Helper Text stays visible under the input field and displays on a single line. |

#### 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%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%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%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D) **(OFF)**. |
| **Hide Field** | Displays or hides the component from view. Setting Hide Field to (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%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%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%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D) **(OFF)**. |

## Validation Panel

[![A static image dispaying the Protected Field component's Validation settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Protected_Field_Component_Validation_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Protected%20Field%20Component%20Validation.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)

#### Input Required

| 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%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%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%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%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%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D) **(OFF)**. |
| **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

[![A static image dispaying the Protected Field component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Protected_Field_Component_Advanced_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Protected%20Field%20Component%20Advanced.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)

#### Additional Validation Options

| Setting | Description |
| --- | --- |
| **Min Length** | Sets the minimum number of characters that an end-user must enter for valid input. |
| **Min Length Error Message** | A custom error message that displays below the input field. The error message displays when the entry does not meet the minimum character length rule. |
| **Max Length** | Sets the maximum number of characters that an end-user must enter for valid input. |
| **Max Length Error Message** | A custom error message that displays below the input field. The error message displays when the entry does not meet the maximum character length rule. |

#### 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 Protected Field Component

Configure a Protected Field component to collect an account number. You'll use validation settings to ensure the account number is exactly 10 characters in length. These instructions assume that you have an open module saved with a title.

1. In the Module Builder, drag and drop a **P****rotected Field** component onto your canvas.
2. In the Property ID field, enter **accountNumber**.
3. In the Label Text field, enter `Enter Account Number`.
4. In the **Min Length** and **Max Length** fields, enter `10`.
5. From the component's configuration window, click the **![Advanced Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Advanced.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D) Advanced** tab.
6. In the **Min Length Error Message** and **Max Length Error Message** fields, enter `Account number must be 10 digits long.`.

[![A static image displaying the Protected Field component's Advanced settings. The Min & Max Length fields, and the Min Length & Max Length Error message fields are highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Protected_Field_Component_Example_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Protected%20Field%20Component%20Example.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)
7. Click **Save & Close**.
8. **Save** your module.

**Preview** your module in Express View to see the following functionality:

[An animated image displaying the Protected Field component as seen in Express View, entering characters triggers the Validation message until 10 characters have been entered.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Protected_Field_Component_ExpressView.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)

## Structure of a Protected Field Component's Data

A Protected Field component stores its data as key/value pair. The value is stored as a string data type.

[![A static image displaying the Developer Console view, the Submission Data displays the Protected Field component as a key-value pair.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Protected_Field_Component_DataStructure_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Protected%20Field%20Component%20DataStructure.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A42Z&se=2026-11-07T18%3A57%3A42Z&sr=c&sp=r&sig=iN9G2rh8Hpx9rtQEo5ThQLF6%2FhP5VTMZwmkAxohoFvI%3D)

## Resources

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

The Centauri (v 1.0.0) runtime is the first-generation foundation of the Unqork Designer Platform. Centauri provides Creators a codeless experience for developing applications.

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.

Personal Identifiable Information (PII) is any representation of information that permits the identity of an individual to whom the information applies to be reasonably inferred by either direct or indirect means.

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.

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

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.