# 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. *** ## Tutorials *No tutorials available yet.* *** ## Step 1 — Choose Your Editor Mode The Text Area has two modes that change how users enter text. Set the **Mode** in the **Properties** tab. | Mode | What the user sees | When to use | | ------------------ | --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | **Rich** (default) | A rich text editor with a formatting toolbar (bold, italic, lists, links, images, etc.) | When users need formatted text — case notes, email drafts, descriptions with links or images | | **Plain** | A simple textarea with no formatting options | When you only need raw text — comments, short answers, search queries | > **Example:** A case management flow uses **Rich** mode so support agents can format their case notes with bullet points, bold text, and links to related articles. > **Tip:** In **Rich** mode, the component stores the content as HTML. In **Plain** mode, it stores plain text. Keep this in mind if you plan to display the value later — HTML content will render with formatting, plain text will not. *** ## Step 2 — Configure the Toolbar The toolbar controls which formatting options the user sees. This section only applies when **Mode** is set to **Rich**. ### Toolbar Position Set the **Toolbar Variant** to control where the toolbar appears: | Variant | What it looks like | | ------------------------- | --------------------------------------------- | | **Top Toolbar** (default) | Formatting buttons appear above the text area | | **Bottom Toolbar** | Formatting buttons appear below the text area | ### Toolbar Categories Use the **Categories** setting to choose which groups of buttons appear in the toolbar. Select one or more from the list: | 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 with Salesforce Design System colors | | **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 (**Header**, **Color**, **Highlight Color**, **Code**, **Code Block**) are available but not enabled by default — add them from the **Categories** multi-select. > **Example:** A developer knowledge base flow enables **Code** and **Code Block** categories so users can paste formatted code snippets into their documentation entries. *** ## Step 3 — Set Up Validation The Text Area supports several validation options to control what users can submit. ### Length Validation | Setting | What it does | | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Min Length** | The minimum number of characters required. If the user enters fewer characters, a "Your entry is too short" error appears on submit. | | **Max Length** | The maximum number of characters allowed. If exceeded, a "Your entry is too long" error appears on submit. | | **Show Character Count** | Displays a character counter below the text area. When **Max Length** is set, it shows remaining characters (e.g., "150/500 characters remaining"). Without a max, it shows the total count (e.g., "150 characters"). | > **Tip:** The character count strips HTML tags in **Rich** mode — it counts the visible text, not the underlying HTML markup. ### Required Field Toggle **Required** on to prevent users from moving to the next screen without entering a value. A "Complete this field" error appears if they try to proceed with an empty field. ### Blocked Words In the **Properties** tab under advanced settings, the **Blocked Words** setting lets you define a list of words that users cannot include in their input. If a blocked word is detected when the user submits, an error message appears: "Input contains blocked words: \[word1, word2]". This feature is 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 and on-topic. *** ## Step 4 — Set a Default Value and Label | Setting | What it does | | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Label** | The label displayed above the text area. Visible to the user unless the variant is set to label-hidden. | | **Placeholder** | Gray hint text shown inside the text area when it's empty. Disappears when the user starts typing. | | **Value** | Pre-populate the text area with default content. Supports **Mapped** values — use a flow variable to load existing data (e.g., `{!caseDescription}` to pre-fill a case's description for editing). In **Rich** mode, this accepts HTML. | | **Field Level Help** | A help tooltip (?) that appears next to the label. Use it to explain what the user should enter. | | **Disabled** | Grays out the text area and prevents user input. Useful for displaying read-only text in a flow screen. | > **Example:** An account update flow pre-fills the Text Area with the existing `{!Account.Description}` value so users can review and edit it rather than starting from scratch. *** ## Output Variables The Text Area exposes one output variable you can reference in your flow after the screen. | Output variable | Type | What it returns | | --------------- | ------ | ------------------------------------------------------------------------------------------------------- | | **Value** | String | The content entered by the user. In **Rich** mode, this is HTML. In **Plain** mode, this is plain text. | To use the value, select the screen element in Flow Builder, then the Text Area component, and pick the **Value** output. > **Example:** After the text entry screen, use an **Assignment** element to save the Text Area's **Value** output into a record field — e.g., assign it to `{!Case.Description}` before an **Update Records** element. *** ## Styling Open the **Style** tab in the Component Builder to adjust the visual layout. | Setting | What it controls | | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Width** | The horizontal size of the component. Set to `100%` to fill the available space, or a fixed value like `500px`. | | **Height** | The overall height of the component including label and toolbar. | | **Margin** (Top, Right, Bottom, Left) | Space between the text area and surrounding components. | | **Padding** (Top, Right, Bottom, Left) | Space between the component border and its content. | | **Border** | Customize the border style around the component. | | **Min Height** (Text Area Sizing) | The minimum height of the text input box itself (not the whole component). Use this to make the editable area taller — e.g., `200px` for a larger writing surface. | | **Max Height** (Text Area Sizing) | The maximum height of the text input box. The content area will scroll if the text exceeds this height. Set to `none` for unlimited growth. | > **Tip:** The **Text Area Sizing** settings (Min Height / Max Height) control only the editable content area — not the label or toolbar. Use them to give users more or less writing space depending on the use case. *** ## Troubleshooting | Problem | Cause | Fix | | ---------------------------------------- | ---------------------------------------------------- | --------------------------------------------------------------------------------------------- | | "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's 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 | Count shows more/fewer characters than expected | 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: 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: ``` GET https://docs.avonnicomponents.com/flow/flow-components/text-area.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.