---
title: "Input Components Properties"
slug: "input-components-properties"
updated: 2023-12-14T11:32:42Z
published: 2023-12-14T11:32:42Z
canonical: "kb.easysend.io/input-components-properties"
---

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

# Input Components Properties

## Input Components Properties

The following sections detail the properties of the Input section components:

- Text Input
- Upload competent
- Signature
- Date Input
- Form Text Area

Based on the Theme you are using, some of the components may appear under a different name or be found under an Advanced category different category, for additional information, see the [Theme Overview](/v1/docs/themes-overview) article.

NOTEIf you want to skip to our How to videos section and learn how to use Input components, click [here](/v1/docs/other-components-properties#how-to-videos).

### Text Input

After adding the Text Input component, configure its properties, design its look, and connect it to the Model.

**Figure 1** and ****Table 1**** describe the properties of the Text Input component:

![Text Input Properties Section.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1681727465329.png)

**Figure 1: Text Input Properties Section**

**Table 1: Text Input Properties Section**

| **Number** | **Icon** | **Name** | **Description** |
| --- | --- | --- | --- |
| 1 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/other-components-properties-image-o6u5q77b.png) | Model | Enables to connect the component to the Model by: - Clicking the icon - Creating a new transaction data item NOTE - For additional details on how to connect the component to the Model, see the [Model Overview](https://kb.easysend.io/docs/model-overview) and the [Setting Up the Model](/v1/docs/setting-up-the-model) articles - For additional details on how to create a new transaction data item using the Properties section, see the [Model Overview](https://kb.easysend.io/docs/model-overview) and the [Setting Up the Model](/v1/docs/setting-up-the-model) articles |
| 2 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/other-components-properties-image-rzf18i19.png) | Label | Enables to add a label to the component NOTE The globe icon allows you to add labels in different languages and will appear only if the Webflow is set with more than one language, for additional information, see the [Multi-Language](/v1/docs/multi-language) article |
| 3 | - | Disabled | - When checked - disables the component - When not checked - enables to use the component to input text |
| 4 | - | Text Direction | Enables to set the text direction of the component: - Auto - Right to left (Rtl) - Left to right (Ltr) |
| **5** | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/other-components-properties-image-yukv20mu.png) | Error Msg | NOTE The Model validations replaced this option, for additional information, see the [Validations](/v1/docs/validations) article |
| 6 | - | Pattern | Enables to set text input patterns: - [0-9] - numbers only input - [a-z] - letters (English) only input |
| 7 | - | Max Length | Enables to set a maximum input length |
| 8 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/other-components-properties-image-w5avj68j.png) | Comment | Enables to write a comment underneath the text input field NOTE The globe icon allows you to write the comment in different languages and will appear only if the Webflow is set with more than one language, for additional information, see the [Multi-Language](/v1/docs/multi-language) article |
| 9 | - | Show Valid Tick | - When checked - displays an indication that the input data is valid - When not checked - disables the option to display an indication that the input data is valid |
| 10 | - | Show X Mark | - When checked - displays an indication that the input data is not valid - When not checked - disables the option to display an indication that the input data is not valid |
| 11 | - | Type | Enables to set the input type: - Text - Number - Email - Tel - Amount - amount with 2 decimal places NOTE When a digital process runs on a mobile device, different keyboards (text or numbers ) will appear automatically |
| 12 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/other-components-properties-image-bgitng5z.png) | Placeholder | Enables to add a placeholder to the text input field NOTE The globe icon allows you to write the placeholder in different languages and will appear only if the Webflow is set with more than one language, for additional information, see the [Multi-Language](/v1/docs/multi-language) article |
| 13 | - | Hide Asterisk On Required | - When checked - enables to hide the asterisk that appears next to a required text input field - When not checked - enables to display the asterisk that appears next to a required text input field NOTEA field is set as required using the Model validations, for additional information, see the [Validations](/v1/docs/validations) article |
| 14 | - | Mask | Enables to input a string of characters that indicates the valid input values: - For example, the mask will be used when the text input component stores information such as phone numbers so that requires ten digits of input: 0000000000 - Another usage example is when we need to style a long number with separators such as commas, then the mask will be written like this: 000,000,000 NOTE - If the mask direction during text input is wrong, check the “Reverse Mask Direction" checkbox - An added mask does not appear on a PDF, it is only visible on the UI of the digital process, for additional assistance please contact our support team |
| 15 | - | Add Symbol | Enables to add a symbol next to the text to input: - None - USD $ - Euro € - GBP £ - JPY # - NIS ₪ - percentage % - Yen 円 - ThousanYen ナ 円 NOTEAn added symbol does not appear on a PDF, it is only visible on the UI of the digital process |
| 16 | - | Loading Spinner On | Enables to display a spinner when input data is loading automatically NOTEInput data can be loaded automatically when setting the input value to Autocomplete Service using the Model, for additional information, see the [Values](/v1/docs/values) article |
| 17 | - | Reverse Mask Direction | Enables to reverse the direction of the mask that was set |
| 18 | - | + Add to Agent | Enables to add the component to the Agent screen NOTE This button will only appear if the Journey Sender feature is enabled, for additional information, see the [Journey Sender](/v1/docs/journey-sender) article |
| 19 | - | Delete | Enables to delete the component |

#### 

### 

### Upload Component

After adding the Upload Component, configure its properties, design its look, and connect it to the Model. **Figure 2** and **Table 2** describe the properties of the Upload component:

![ Upload Component Properties Section.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1681734136927.png)

**Figure 2: Upload Component Properties Section**

**Table 2: Upload Component Properties Section**

| **Number** | **Icon** | **Name** | **Description** |
| --- | --- | --- | --- |
| 1 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/other-components-properties-image-mv718awi.png) | Model | Enables to connect the component to the Model by: - Clicking the icon - Creating a new transaction data item NOTE - For additional details on how to connect the component to the Model, see the [Model Overview](https://kb.easysend.io/docs/model-overview) and the [Setting Up the Model](/v1/docs/setting-up-the-model) articles - For additional details on how to create a new transaction data item using the Properties section, see the [Model Overview](https://kb.easysend.io/docs/model-overview) and the [Setting Up the Model](/v1/docs/setting-up-the-model) articles |
| 2 | - | With Title | - When checked - enables to display the title (if a title was set) of the component - When not checked - disables the option to display the title of the component even if it was set |
| 3 | - | Title Text | Enables to set the title of the component NOTE The title will be displayed if the With Title option is checked |
| 4 | - | Accept File Types | EasySend supports all file types for upload, for best practice, it is recommended to limit the file types an end-user can upload while using a digital process to ensure protection and accuracy NOTE - The accepted file types must be written in the following fashion: .filetype, .filetype - for example: .jpg, .png, .pdf - The size limit of an uploaded file is 5MB - When multiple files are uploaded (with multiple Upload components), the size limit is 30MB in total - For additional information about file size limitations, please contact our support team |
| 5 | - | + Add to Agent | Enables to add the component to the Agent screen NOTE This button will only appear if the Journey Sender feature is enabled, for additional information, see the [Journey Sender](/v1/docs/journey-sender) article |
| 6 | - | Delete | Enables to delete the component |

### Signature

After adding the Signature component, configure its properties, design its look, and connect it to the Model. **Figure 3** and **Table 3** describe the properties of the Signature component:

![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1681734373501.png)

**Figure 3: Signature Component Properties Section**

**Table 3: Signature Component Properties Section**

| **Number** | **Icon** | **Name** | **Description** |
| --- | --- | --- | --- |
| 13 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/other-components-properties-image-yn6qyck0.png) | Model | Enables to connect the component to the Model by: - Clicking the icon - Creating a new transaction data item NOTE - For additional details on how to connect the component to the Model, see the [Model Overview](https://kb.easysend.io/docs/model-overview) and the [Setting Up the Model](/v1/docs/setting-up-the-model) articles - For additional details on how to create a new transaction data item using the Properties section, see the [Model Overview](https://kb.easysend.io/docs/model-overview) and the [Setting Up the Model](/v1/docs/setting-up-the-model) articles |
| 2 | - | Required | - When checked - enables to set the component as required - When not checked - enables to set the component as not required |
| 3 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/other-components-properties-image-6v86iu8z.png) | Instruction | Enables to set instructions that describe how to use the component NOTE The globe icon allows you to write instructions in different languages and will appear only if the Webflow is set with more than one language, for additional information, see the [Multi-Language](/v1/docs/multi-language) article |
| 4 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/other-components-properties-image-kp1ng4px.png) | Button Text | Enables to set the text of the button NOTE The globe icon allows you to write the button text in different languages and will appear only if the Webflow is set with more than one language, for additional information, see the [Multi-Language](/v1/docs/multi-language) article |
| 5 | - | + Add to Agent | Enables to add the component to the Agent screen NOTE This button will only appear if the Journey Sender feature is enabled, for additional information, see the [Journey Sender](/v1/docs/journey-sender) article |
| 6 | - | Delete | Enables to delete the component |

#### 

### Date Input

After adding the Date Input component, configure its properties, design its look, and connect it to the Model. **Figure 4** and **Table 4** describe the properties of the Date Input component:

![Date Input Component Properties Section.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1681735704022.png)

**Figure 4: Date Input Component Properties Section**

**Table 4: Date Input Component Properties Section**

| **Number** | **Icon** | **Name** | **Description** |
| --- | --- | --- | --- |
| 1 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/other-components-properties-image-u2ixp882.png) | Model | Enables to connect the component to the Model by: - Clicking the icon - Creating a new transaction data item NOTE - For additional details on how to connect the component to the Model, see the [Model Overview](https://kb.easysend.io/docs/model-overview) and the [Setting Up the Model](/v1/docs/setting-up-the-model) articles - For additional details on how to create a new transaction data item using the Properties section, see the [Model Overview](https://kb.easysend.io/docs/model-overview) and the [Setting Up the Model](/v1/docs/setting-up-the-model) articles |
| 2 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/other-components-properties-image-fum8b93n.png) | Label | Enables to add a label to the component NOTE The globe icon allows you to add labels in different languages and will appear only if the Webflow is set with more than one language, for additional information, see the [Multi-Language](/v1/docs/multi-language) article |
| 3 | - | Disabled | - When checked - disables the component - When not checked - enables to use the component to input text |
| 4 | - | Text Direction | Enables to set the text direction of the component: - Auto - Right to left (Rtl) - Left to right (Ltr) |
| 5 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/other-components-properties-image-1vg6fcwj.png) | Error Msg | NOTE This option was replaced by the Model validations, for additional information, see the [Validations](/v1/docs/validations) article |
| 6 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/other-components-properties-image-nei86p8o.png) | Comment | Enables to write a comment underneath the date input field NOTE The globe icon allows you to write the comment in different languages and will appear only if the Webflow is set with more than one language, for additional information, see the [Multi-Language](/v1/docs/multi-language) article |
| 7 | - | Show Valid Tick | - When checked - displays an indication that the input data is valid - When not checked - disables the option to display an indication that the input data is valid |
| 8 | - | Show X Mark | - When checked - displays an indication that the input data is not valid - When not checked - disables the option to display an indication that the input data is not valid |
| 9 | - | Show Required Asterisk | - When checked - enables to display the asterisk that appears next to a required text input field - When not checked - enables to hide the asterisk that appears next to a required text input field NOTE A field is set as required using the Model validations, for additional information, see the [Validations](/v1/docs/validations) article |
| 10 | - | + Add to Agent | Enables to add the component to the Agent screen NOTE This button will only appear if the Journey Sender feature is enabled, for additional information, see the [Journey Sender](/v1/docs/journey-sender) article |
| 11 | - | Delete | Enables to delete the component |

### Form Text Area

After adding the From Text Area component, configure its properties, design its look, and connect it to the Model. **Figure 5** and **Table 5** describe the properties of the Date Input component:

![Form Text Area Component Properties Section.](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1685944315805.png)

**Figure 5: Form Text Area Component Properties Section**

**Table 5: Form Text Area Component Properties Section**

| **Number** | **Icon** | **Name** | **Description** |
| --- | --- | --- | --- |
| 1 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/other-components-properties-image-u2ixp882.png) | Model | Enables to connect the component to the Model by: - Clicking the icon - Creating a new transaction data item NOTE - For additional details on how to connect the component to the Model, see the [Model Overview](https://kb.easysend.io/docs/model-overview) and the [Setting Up the Model](/v1/docs/setting-up-the-model) articles - For additional details on how to create a new transaction data item using the Properties section, see the [Model Overview](https://kb.easysend.io/docs/model-overview) and the [Setting Up the Model](/v1/docs/setting-up-the-model) articles |
| 2 | - | Fix Height | - When checked - the height of the text area is fixed and will not dynamically adjust according to the input text - When not checked - the height of the text area is not fixed and will dynamically adjust according to the input text |
| 3 | - | Text Direction | Enables to set the text direction of the component: - Auto - Right to left (Rtl) - Left to right (Ltr) |
| 4 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/other-components-properties-image-fum8b93n.png) | Label | Enables to add a label to the component NOTE The globe icon allows you to add labels in different languages and will appear only if the Webflow is set with more than one language, for additional information, see the [Multi-Language](/v1/docs/multi-language) article |
| 5 | - | Show Required Asterisk | - When checked - enables to display the asterisk that appears next to a required text input field - When not checked - enables to hide the asterisk that appears next to a required text input field NOTE A field is set as required using the Model validations, for additional information, see the [Validations](/v1/docs/validations) article |
| 6 | - | Max Chars | Enables to set the maximum number of characters allowed to input |
| 7 | - | Max Lines | Enables to set the maximum number of input lines |
| 8 | - | Disabled | - When checked - disables the component - When not checked - enables to use the component to input text |
| 9 | - | + Add to Agent | Enables to add the component to the Agent screen NOTE This button will only appear if the Journey Sender feature is enabled, for additional information, see the [Journey Sender](/v1/docs/journey-sender) article |
| 10 | - | Delete | Enables to delete the component |

## How to Videos

To quickly learn how to use Input components, watch the following videos.

- Text Input:

[Embedded content](https://www.youtube.com/embed/APf1aM_WDKg?&wmode=opaque&rel=0)

- Upload Component:

[Embedded content](https://www.youtube.com/embed/ljhIx1gArj0?&wmode=opaque&rel=0)

- Signature:

[Embedded content](https://www.youtube.com/embed/omheh2Pt52U?&wmode=opaque&rel=0)

- Date Input:

[Embedded content](https://www.youtube.com/embed/JWxJe_smHeQ?&wmode=opaque&rel=0)