> 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/text-area.md).

# Text Area

The Text Area captures multi-line text input from users in a flow screen, with optional rich text formatting, toolbar customization, and input validation.

***

## Overview

Text Area supports two modes: **Rich** (a formatted editor with a toolbar) and **Plain** (a bare textarea). Use Rich mode when users need to apply formatting such as bold, lists, or links. Use Plain mode when you only need raw text — comments, search queries, or short answers.

> **Tip:** In Rich mode the component stores content as HTML. In Plain mode it stores plain text. Keep this in mind if you display the value later — HTML content renders with formatting, plain text does not.

***

## Configuration

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

### Properties

**Label** is the label displayed above the text area, visible to the user.

**Placeholder** shows gray hint text inside the text area when it is empty. It disappears when the user starts typing.

**Field Level Help** adds a tooltip (?) next to the label. Use it to explain what the user should enter.

**Required** prevents users from proceeding to the next screen without entering a value. A "Complete this field" error appears if they try to submit with an empty field.

**Value** pre-populates the text area with default content. Supports **Mapped** values — use a flow variable to load existing data (e.g., `{!Case.Description}` to pre-fill for editing). In Rich mode this accepts HTML.

**Disabled** grays out the text area and prevents user input. Useful for displaying read-only text in a flow screen.

**Max Length** sets the maximum number of characters allowed. An error appears on submit if the user exceeds it.

**Min length** sets the minimum number of characters required. An error appears on submit if the user enters fewer.

**Show Character Count** displays a character counter below the text area. When **Max Length** is set, it shows remaining characters (e.g., "150/500"). Without a max it shows the total count. The counter strips HTML tags in Rich mode — it counts visible text, not markup.

**Mode** controls the editor type.

| Mode                 | What the user sees                           | When to use                                                                  |
| -------------------- | -------------------------------------------- | ---------------------------------------------------------------------------- |
| **Rich** *(default)* | A rich text editor with a formatting toolbar | Formatted text — case notes, email drafts, descriptions with links or images |
| **Plain**            | A simple textarea with no formatting options | Raw text — comments, short answers, search queries                           |

**Toolbar Variant** controls where the toolbar appears. Requires **Mode** to be set to **Rich**.

| Variant                     | What it looks like                            |
| --------------------------- | --------------------------------------------- |
| **Top Toolbar** *(default)* | Formatting buttons appear above the text area |
| **Bottom Toolbar**          | Formatting buttons appear below the text area |

**Categories** chooses which groups of buttons appear in the toolbar. Available when **Mode** is **Rich**.

| Category              | What it adds to the toolbar                             |
| --------------------- | ------------------------------------------------------- |
| **Font**              | Font family and font size selectors                     |
| **Text**              | Bold, italic, underline, strikethrough                  |
| **Body**              | Ordered lists, unordered lists, indentation, blockquote |
| **Align Text**        | Left, center, right, justify alignment                  |
| **Insert Content**    | Links, images, tables                                   |
| **Remove Formatting** | A button to clear all formatting from selected text     |
| **Header**            | Heading levels (H1 through H6)                          |
| **Color**             | Text color picker                                       |
| **Highlight Color**   | Background highlight color picker                       |
| **Code**              | Inline code formatting                                  |
| **Code Block**        | Multi-line code block formatting                        |

By default the toolbar includes: **Font**, **Text**, **Body**, **Align Text**, **Insert Content**, and **Remove Formatting**. The other categories are available but not enabled by default.

> **Example:** A developer knowledge base flow enables **Code** and **Code Block** categories so users can paste formatted code snippets into their documentation entries.

### Advanced Options

**Blocked Words** defines a list of words users cannot include in their input. If a blocked word is detected on submit, an error appears: "Input contains blocked words: \[word1, word2]". Only available in **Rich** mode. The check is case-insensitive.

> **Example:** A customer-facing feedback form blocks profanity and competitor names to keep submissions clean.

***

## Styling

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

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the text area, creating space between it and other elements on the screen.

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

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

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

{% tab title="Size" %}
Controls the component's overall dimensions, including label and toolbar.

* **Width / Height:** Set fixed dimensions for the component.
* **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds.
* **Overflow:** Control how content that exceeds the bounds is handled.
  {% endtab %}

{% tab title="Border" %}
Customizes the border surrounding the component.

* **Color:** Set the border color.
* **Size:** Adjust the border thickness.
* **Style:** Choose a border style (e.g. solid, dashed, dotted).
* **Radius:** Control the roundness of the corners.
  {% endtab %}

{% tab title="Text Area Sizing" %}
Controls the editable content area only — not the label or toolbar.

* **Min Height:** The minimum height of the text input box. Use this to make the editable area taller.
* **Max Height:** The maximum height of the text input box; the content area scrolls when text exceeds it.
  {% endtab %}

{% tab title="Label" %}
Styles the text area's label.

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

***

## Troubleshooting Common Issues

* **"Complete this field" error on submit** — Required is on and the user left the field empty. Enter a value, or turn off **Required** if the field is optional.
* **"Your entry is too long" error** — The text exceeds the **Max Length** setting. Increase **Max Length** or ask the user to shorten their input.
* **"Your entry is too short" error** — The text is below the **Min length** setting. Lower **Min length** or guide the user to write more.
* **"Input contains blocked words" error** — A word from the **Blocked Words** list was detected. Remove the word from the input, or update the **Blocked Words** list if it is a false positive.
* **Toolbar not visible** — **Mode** is set to **Plain**. Switch to **Rich** mode to see the formatting toolbar.
* **Character count seems wrong in Rich mode** — The counter strips HTML tags and counts visible text only — this is expected behavior.
* **Categories setting has no effect** — **Mode** is set to **Plain**. **Categories** and **Toolbar Variant** only apply in **Rich** mode.
* **Blocked Words setting has no effect** — **Mode** is set to **Plain**. **Blocked Words** validation only works in **Rich** mode.


---

# 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/text-area.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.