> 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/text-area.md). # Text Area The Avonni Text Area component is a multi-line input field that lets users enter longer text content. It comes in two presets: **Rich Text Editor** (default), which provides a formatting toolbar, and **Text Area**, which offers a simple plain-text input — making it suitable for everything from formatted knowledge-base entries to basic comments or descriptions. ## Overview Use the Text Area when you need users to enter more than a single line of text. Switch to the **Rich** mode to give users formatting controls (bold, lists, alignment, etc.); use **Plain** mode when you only need unformatted text and want a lighter, simpler input. ### Use Cases * Capture case descriptions or feedback in support apps. * Enter product notes or project details. * Collect user comments in surveys or portals. * Input multi-line addresses or instructions. * Create rich text entries for knowledge articles. ## Configuration To configure the Text Area, select it on the canvas. The **Edit Text Area** panel opens on the right. The sections below mirror the properties panel from top to bottom. ### Properties #### Label The label of the text area, displayed above the input field. #### Value The HTML content in the text area. Bind this to a variable to store, default, or reuse the entered text across your flow. #### Placeholder Text displayed inside the field when it is empty, to prompt the user for a valid entry. #### Field Level Help Help text detailing the purpose and function of the text area, shown as a tooltip next to the label. #### Mode Controls whether the text area uses a rich-text editor or a plain-text input. Defaults to **Rich**. * **Rich** — displays a formatting toolbar so users can apply styles such as bold, lists, and alignment. * **Plain** — a simple multi-line text input with no formatting options. #### Toolbar Variant Defines where the formatting toolbar appears relative to the text area. Defaults to **Top Toolbar**. Requires: **Mode** = **Rich**. * **Top Toolbar** — toolbar sits above the text area. * **Bottom Toolbar** — toolbar sits below the text area. #### Categories The formatting button groups shown in the rich text toolbar. Defaults to Font, Text, Body, Align Text, Insert Content, and Remove Formatting. Requires: **Mode** = **Rich**. Available categories: * **Font** — font family and size controls. * **Text** — bold, italic, underline, strikethrough. * **Body** — paragraph and list formatting. * **Align Text** — left, center, right, and justify alignment. * **Insert Content** — links, images, and other embedded content. * **Remove Formatting** — clears applied styles. * **Header** — heading level styles (H1, H2, etc.). * **Color** — text foreground color. * **Highlight Color** — text background highlight color. * **Code** — inline monospaced code formatting. * **Code Block** — block-level code snippet formatting. #### Show Character Count If enabled, a live character count is displayed below the text area. #### Max Length The maximum number of characters allowed in the text area. #### Min Length The minimum number of characters required in the text area. #### Read Only If enabled, the text area is read-only and cannot be edited by users. #### Edit Mode Controls how the field is edited. Defaults to **Input**. Requires: **Read Only** is off. * **Input** — the field is displayed as a standard input. * **Inline** — the field is edited inline, without a dedicated input box. #### Blocked Words A list of words that are restricted from being entered. Requires: **Mode** = **Rich**. #### Required If enabled, an asterisk is displayed before the label and the field must be filled before submitting. #### Disabled If enabled, the text area is disabled and users cannot interact with it. ### 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 Area. Configure them from the **Interactions** tab of the Edit Text Area panel. ### Change Fires when the value in the text area changes. Use this to react to user input in real time — for example, to update a variable, validate content, or drive downstream components. ## Troubleshooting Common Issues * **Character count not visible** — Enable **Show Character Count** and optionally set a **Max Length** so the counter has a limit to display against. * **Formatting toolbar missing** — Confirm **Mode** is set to **Rich**. The toolbar is not available in Plain mode. * **Toolbar categories not appearing** — Verify the desired categories are selected under the **Categories** setting. Only selected categories appear in the toolbar. * **Long text being cut off** — Increase or remove the **Max Length** limit. --- # 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/text-area.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.