# Text Input

> Learn how to implement the Text Input component to allow users to enter text, validate entries, trigger actions, and store data in the Datastore within PandaSuite applications.

https://docs.pandasuite.com/essentials/components/text-input/

**The Text Input component allows you to display a field for the user to write text. This text can be reused elsewhere in the application, stored in the Datastore, or used to trigger an action.**

> **Info**
>
> When entering text, the device's keyboard opens automatically (on mobile,
> tablet, and computer). On a touch terminal, you need to associate a [virtual
> keyboard](https://docs.pandasuite.com/essentials/components/virtual-keyboard/).

[Video: Text input introduction video](https://www.youtube.com/embed/Vzj2S-hcqWs?&hl=fr&cc_lang_pref=fr&cc_load_policy=1)

## Insert a text input field

Insert the **Text Input** component.

In the properties, customize the appearance (size, alignment, color) and add a generic message if desired.

[Image: Text Input selected on the Invite screen, with its Type list open: Text, Text Area, Password, Email, Number, Phone, URL, Date]

You can choose from several types of text to customize the display format:

- **Text**
- **Text Area**
- **Password**
- **Email**
- **Number**
- **Phone**
- **URL**
- **Date**

## Validate the entry

Once the user has completed the field, you need to add an action to validate the entry. You have two options:

- Automatically validate the entry
- Create a validation button

### Automatically validate

To automatically validate, simply activate the **Live Validation** option in the component properties.

### Create a validation button

To create a validation button, insert a button and add an action.

Select the event **Single tap/click** and the action **Interact with a component**. Select the **Text input** component and the action **Validate**.

[Image: Action window of the Check my answer button: on Single tap/click, Validate runs on the Answer text input]

## Display the entered text

You can reuse the validated text in the application.

Insert a text block and customize the style. In its **Content**, click **Insert data**, click the new data token and choose **From a component**. Click the Text input (**Interactive Selection**), then pick **Input value**.

[Video: in the You typed text, Insert data adds a token that From a component binds to the Input value of the Answer text input]

## Add a conditional action

You can trigger actions based on the text entered by the user using [Conditions](https://docs.pandasuite.com/essentials/components/condition/).

### Based on the entered value

Let's imagine a plant quiz. The user must enter the word *tulip* to get the correct answer. A pop-up message indicates whether the response is correct or incorrect. You need to create a condition *If the text is tulip* and another *If the text is not tulip* and associate the correct actions.

Insert the **Condition** component, and in the properties, create the two conditions using the value of the **Text input** component.

[Image: Condition component with two conditions, Answer is tulip and Answer is not tulip: the second checks that the Input value is not equal to tulip]

On the validation button, add an action **Interact with a component** > **Condition** > **Evaluate all conditions**.

[Image: Check my answer button: on Single tap/click, Validate on the Answer text input, then Evaluate all conditions on the Answer check component]

With the Condition component, add actions to open the correct pop-ups based on each condition.

For each condition, choose the trigger **Evaluation If {condition} is true**, then the action **Interact with a component** > **Pop-up** > **Open pop-up**.

[Image: Actions of the Answer check condition component: if the answer is tulip, Open pop-up shows Popup right, otherwise Popup wrong]

### Based on validation status

With the Condition component, you also have access to other parameters:

- **Is empty**
- **Is valid**
- **Is validated**

## Store / send the data

The data entered by the user is local: when the application is closed, this text disappears.

To make the data persistent, store it in a variable in the [Datastore](https://docs.pandasuite.com/essentials/data/datastore/):

1. Create a **Text** variable in the Datastore.
2. On the validation button (or via **Live Validation**), add the action **Interact with a data source** > **Datastore** > **Create/Update Data (Local)**.
3. Choose the variable as the **Target**, use the **Set** function, and link the **Value** to the **Text Input** component.

You can also send the data to an external service using the [HTTP](https://docs.pandasuite.com/essentials/components/http/) component, or associate it with a user session through the [Firebase Session](https://docs.pandasuite.com/essentials/components/firebase-session/) component.

[Template: Incident Report Form](https://pandasuite.com/dashboard/use-template/_2-3vY4BsEg4iwlB5iHk)

## Learn more

- [Datastore](https://docs.pandasuite.com/essentials/data/datastore/)
- [Data binding](https://docs.pandasuite.com/essentials/data/data-binding/)
- [Condition component](https://docs.pandasuite.com/essentials/components/condition/)
- [HTTP component](https://docs.pandasuite.com/essentials/components/http/)