> For the complete documentation index, see [llms.txt](https://docs.lowcodera.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lowcodera.com/ui-components-1/textbox.md).

# TextBox

## Purpose

The lowcodera text box is a component for editing, displaying, or entering plain text on forms to capture user names, phone numbers, email, and more.

## Variations

![](/files/DMGbaqOjslli7e4KJedL)

‌There are several variations of textbox with different colors and configuration properties.

* Textbox 
* Textbox with Numeric Value
* Textbox with Password
* Multiline Textbox
* Textbox with validations

## Component Properties

The properties below are the main ones which change this components appearance and behaviors.

<table data-header-hidden><thead><tr><th width="215">Control Property</th><th>Description</th><th width="152">Required</th><th width="183">Accepted Values</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Required</strong></td><td><strong>Accepted Values</strong></td></tr><tr><td>Label</td><td>Property to set Label for Textbox control</td><td>Yes</td><td>Text</td></tr><tr><td>Placeholder</td><td>Property to set placeholder inside Textbox control</td><td>X</td><td>Text</td></tr><tr><td>Type</td><td>Property to set if you want Float value in Textbox</td><td>X</td><td><p>Regular</p><p>Float</p></td></tr><tr><td>IsRequired</td><td>Property to make our textbox field required</td><td>X</td><td>Boolean</td></tr><tr><td>Mode</td><td>Property to set Mode for textbox control</td><td>X</td><td><p>Number</p><p>Password</p><p>Text</p><p>Multiline Text</p></td></tr><tr><td>LinesCount</td><td>Property to set line count for Multiline Textbox</td><td>X</td><td>Numeric</td></tr><tr><td>ShowSucess</td><td>Property to show success message</td><td>X</td><td>Boolean</td></tr><tr><td>SuccessMessage</td><td>Property to set success message</td><td>X</td><td>String</td></tr><tr><td>ShowError</td><td>Property to show error message</td><td>X</td><td>Boolean</td></tr><tr><td>ErrorMessage</td><td>Property to set error message</td><td>X</td><td>String</td></tr></tbody></table>

## Examples&#x20;

### TextBox

![](/files/xvluwJpr9TRtkwpt1Iv0)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Name**
* [x] `Placeholder` is to set as **Please Enter Name**
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our textbox and we want to write some events, we need to use **`OnChange`** Event of the button

```
UpdateContext({Name: TextBox2.CurrentValue})
```

{% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's Textbox control.

| Output Property | Purpose                                             | Example               |
| --------------- | --------------------------------------------------- | --------------------- |
| CurrentValue    | Get Current value from Lowcodera Textbox Component. | TextBox2.CurrentValue |
| {% endtab %}    |                                                     |                       |
| {% endtabs %}   |                                                     |                       |

### Textbox with Numeric Value

![](/files/qaoAecN1Cf0KTQYnPr4N)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Loan Amount**&#x20;
* [x] `Placeholder` is to set as **Please Enter Loan Amount**
* [x] `IsRequired` is to set as **true**
* [x] `Mode` is to set as **Number**
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our textbox and we want to write some events, we need to use **`OnChange`** Event of the button

```
UpdateContext({Name: TextBox2.CurrentValue})
```

{% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's Textbox control.

| Output Property | Purpose                                             | Example               |
| --------------- | --------------------------------------------------- | --------------------- |
| CurrentValue    | Get Current value from Lowcodera Textbox Component. | TextBox2.CurrentValue |
| {% endtab %}    |                                                     |                       |
| {% endtabs %}   |                                                     |                       |

### TextBox with Password

![](/files/IuPHk5KxWavWSMO6RbUq)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Credit Card Number**&#x20;
* [x] `Placeholder` is to set as **Please Enter Credit Card Number**
* [x] `Mode` is to set as **Password**
  {% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's Textbox control.

| Output Property | Purpose                                             | Example               |
| --------------- | --------------------------------------------------- | --------------------- |
| CurrentValue    | Get Current value from Lowcodera Textbox Component. | TextBox2.CurrentValue |
| {% endtab %}    |                                                     |                       |
| {% endtabs %}   |                                                     |                       |

### Multiline Textbox

![](/files/HaGxYMCVxfqKgpobW2OD)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Comments**
* [x] `Placeholder` is to set as **Please Enter Comments**
* [x] `Mode` is to set as **Multilines Text**
* [x] `LineCount` is to set as **5**
  {% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's Textbox control.

| Output Property | Purpose                                             | Example               |
| --------------- | --------------------------------------------------- | --------------------- |
| CurrentValue    | Get Current value from Lowcodera Textbox Component. | TextBox2.CurrentValue |
| {% endtab %}    |                                                     |                       |
| {% endtabs %}   |                                                     |                       |

### Textbox with Validation

![](/files/HqYQ61nE56vvOMn2oV7X)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Name**
* [x] `Placeholder` is to set as **Please Enter Name**
* [x] `IsError` property to be set as `If(IsBlank(txtnamebox.CurrentValue),true,false)`
* [x] `ErrorMessage` property to be set as **Please enter valid value**
  {% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's Textbox control.

| Output Property | Purpose                                             | Example               |
| --------------- | --------------------------------------------------- | --------------------- |
| CurrentValue    | Get Current value from Lowcodera Textbox Component. | TextBox2.CurrentValue |
| {% endtab %}    |                                                     |                       |
| {% endtabs %}   |                                                     |                       |