Text Area
The Avonni Text Area component offers customizable multi-line text input to capture extensive user input.
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 two tabs: Properties 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.
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.
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.
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.
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.
Controls the inner spacing between the component border and its content.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
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.
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.
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.
Styles the text area's label.
Color: Set the label color.
Font Size / Font Style / Font Weight: Control the label typography.
Output Variables
Value
Text
The text the user entered (rich-text markup when Mode is Rich).
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.
Last updated
Was this helpful?