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 with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab 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.
Interactions
Interactions 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.
Styling
Configure the Text Area's appearance from the Style tab of the Edit Text Area panel.
Controls the outer spacing around the component.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the component's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Controls the component's dimensions.
Width / Height: Set fixed dimensions.
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 / Size / Style / Radius: Set the border color, thickness, style, and corner rounding.
Styles the field label.
Text Color / Font Size / Font Style / Font Weight: Set the label color and typography.
Constrains the text area's height.
Min Height / Max Height: Set the height bounds of the input area.
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.
Last updated
Was this helpful?