> 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/dynamic-components/components/input-text.md). # Input Text The Avonni Text Input component is a standard single-line text field for capturing user-entered strings. Use it whenever you need to collect free-form text — names, search terms, short answers — with optional length constraints, pattern validation, and customizable error messages. ## Overview To start with the Text Input component, drop it onto the canvas and configure its label, default value, and any validation rules through the properties panel. ## Configuration To configure the Text Input, select it on the canvas. The **Edit Text Input** panel opens on the right. The sections below mirror the Properties tab. ### Properties #### Label The text label displayed above the input field to identify its purpose to the user. #### Value Pre-populates the field with a default value when the page loads. #### Field Level Help Adds a help icon next to the label. When users hover over or click the icon, the text you enter here appears as a tooltip to explain the field's purpose. #### Variant Controls how the label is positioned relative to the input field. Default: **Standard**. | Variant | Description | | ----------------- | ---------------------------------------------------------------------- | | **Standard** | Label appears above the input field. | | **Label Hidden** | Label is hidden visually but remains accessible to screen readers. | | **Label Inline** | Label appears to the left of the input field on the same line. | | **Label Stacked** | Label floats above the field when the field is focused or has a value. | #### Placeholder Ghost text shown inside the empty field to guide users on what to enter. Disappears once the user starts typing. #### Autocomplete When enabled, allows the browser to suggest previously entered values for the field. #### Maximum Length The maximum number of characters a user can enter. Leave blank for no limit. #### Message When Too Long Custom error message shown when the entered value exceeds the **Maximum Length**. Requires **Maximum Length** to be set. #### Minimum Length The minimum number of characters required in the field. #### Message When Too Short Custom error message shown when the entered value is shorter than **Minimum Length**. Requires **Minimum Length** to be set. #### Pattern A regular expression the entered value must match to be considered valid. For example, `[A-Z]{3}` requires exactly three uppercase letters. #### Message When Pattern Mismatch Custom error message shown when the value does not match the **Pattern**. Requires **Pattern** to be set. #### Required When enabled, the field must be filled in before the record or flow can be submitted. A red asterisk is displayed next to the label. #### Message When Value Missing Custom error message shown when the field is left empty and **Required** is enabled. Requires **Required** to be enabled. #### Disabled When enabled, the field is rendered but users cannot interact with it. Useful for displaying values that should not be changed in the current context. #### Read Only *(Advanced)* When enabled, the field displays its value but cannot be edited. Unlike **Disabled**, the value is still submitted with the form. #### Message When Bad Input *(Advanced)* Custom error message shown when the browser detects that the entered value is not a valid text string. ### Set Component Visibility All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md). ## Interactions [Interactions](/dynamic-components/component-builder/interactions.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 whenever the value in the field changes. Use this to drive other components or logic — for example, filtering a list as the user types, or enabling a submit button once the field has a value. --- # 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/dynamic-components/components/input-text.md?ask=&goal= ``` `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.