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

# Input Text

The Input Text component captures a single line of text on a Flow screen. Use it for names, codes, email addresses, URLs, phone numbers, passwords, and any other short free-form entry, with built-in validation to keep the input clean.

## Overview

Beyond plain text, the component supports specialized input types (email, telephone, URL, password, search) and a full set of validation rules — required, pattern matching, and minimum/maximum length — each with its own error message. Prefix and suffix text, a placeholder, field-level help, and an inline-edit display mode round out the configuration.

## Configuration

To configure it, click the component on the Flow screen. The **Edit Text Input Component** panel opens on the right with three tabs: **Properties**, **Interactions**, and **Style**. The sub-sections below mirror the Properties tab.

### Properties

* **Label** — the text label shown above the input.
* **Prefix** — text displayed before (to the left of) the input field, such as a currency symbol or scheme name.
* **Value** — the default value of the input. Bind it to a Flow variable or record field to pre-fill the field.
* **Suffix** — text displayed after (to the right of) the input field, such as a unit.
* **Field Level Help** — optional tooltip text detailing the purpose and function of the input, shown next to the label.
* **Type** — the kind of input, which controls the keyboard and built-in browser validation:
  * **Text** *(default)* — plain single-line text.
  * **email** — an email address.
  * **Telephone** — a phone number.
  * **URL** — a web address.
  * **Password** — masked input for secrets.
  * **Search** — a search box.
* **Variant** — the label placement and field appearance:
  * **Standard** *(default)* — label above the input.
  * **Label Hidden** — label is hidden (still read by screen readers).
  * **Label Inline** — label sits to the left of the input.
  * **Label Stacked** — label stacked above the input.
  * **Moving Label** — label floats inside the field and animates above it on focus.
* **Placeholder** — hint text shown inside the field when it is empty, to prompt the user for a valid entry.
* **Inline Edit** — when enabled, the field renders as an inline-editable value rather than a standard input box — the user clicks the value to edit it in place.

### Validations

The **Validations** section is collapsed by default. Expand it to enforce entry rules and customize the error messages the user sees.

* **Required** — marks the field as mandatory.
* **Disabled** — greys out the field so the user cannot interact with it.
* **Read Only** — the field is visible but cannot be edited.
* **Pattern** — a regular expression the entered value must match to be considered valid.
* **Max Length** — the maximum number of characters allowed.
* **Min Length** — the minimum number of characters allowed.
* **Message When Bad Input** — error message shown when a bad input is detected.
* **Message When Pattern Mismatch** — error message shown when the value does not match the pattern. Requires **Pattern** to be set.
* **Message When Too Long** — error message shown when the value exceeds the maximum length. Requires **Max Length** to be set.
* **Message When Too Short** — error message shown when the value is shorter than the minimum length. Requires **Min Length** to be set.
* **Message When Type Mismatch** — error message shown when the value does not match the expected type (for example, an invalid email address).
* **Message When Value Missing** — error message shown when the field is **Required** and left empty.

## Interactions

[Interactions](/flow/component-builder/interactions-panel.md) define what happens when users interact with the Text Input. Configure them from the **Interactions** tab of the Edit Text Input panel.

### Change

Fires when the user changes the entered value. Use it to validate as the user types, refresh dependent data on the same screen, or drive conditional logic based on what was entered.

## Styling

The **Style** tab gives you fine-grained control over the Input Text's appearance. Configure it from the **Style** tab of the Edit Text Input panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the component.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the component's content and its edges.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Label" %}
Styles the field label displayed above the input.

* **Color:** Label text color.
* **Font Size / Font Style / Font Weight:** Control the label typography.
  {% endtab %}

{% tab title="Input" %}
Styles the input box itself.

* **Background Color:** Input background color.
* **Text Color:** Color of the entered text.
* **Color Border:** Input border color.
* **Box Shadow:** Shadow around the input.
* **Box Shadow Focus:** Shadow shown when the input has focus.
* **Border Radius:** Corner rounding of the input.
* **Inline Start / Inline End:** Horizontal spacing inside the input, before and after the text.
  {% endtab %}

{% tab title="Prefix" %}
Styles the prefix text shown before the input.

* **Color:** Prefix text color.
* **Font Size / Font Style / Font Weight:** Control the prefix typography.
  {% endtab %}

{% tab title="Suffix" %}
Styles the suffix text shown after the input.

* **Color:** Suffix text color.
* **Font Size / Font Style / Font Weight:** Control the suffix typography.
  {% endtab %}
  {% endtabs %}

## Output Variables

The Input Text exposes the entered text as an output variable you can reference in your flow after the screen. To use it, select the screen element in Flow Builder, then the Input Text component, and pick the output variable you need.

### Entered Value

| Output variable | Type          | What it returns                         |
| --------------- | ------------- | --------------------------------------- |
| **Value**       | Text (String) | The text the user entered in the field. |

> **Example:** After the screen, use **Value** in a **Create Records** element to store the entered text on a new record, or in a **Decision** element to branch on what the user typed.

## Troubleshooting Common Issues

* **Validation messages never appear** — The matching rule isn't set, so there is nothing to validate against. A custom message only shows once its rule is configured — for example **Message When Pattern Mismatch** requires **Pattern**, and **Message When Too Long** requires **Max Length**.
* **The Value output is empty after the screen** — The field was left blank and is not marked **Required**, so the flow received no value. Enable **Required** (with **Message When Value Missing**) if a value is mandatory before the user can continue.
* **The field can't be edited** — **Read Only** or **Disabled** is enabled. Turn both off to let the user type; use **Read Only** only when you want to display a value the user shouldn't change.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/flow/flow-components/input-text.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.