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.
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.
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:
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:
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
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
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.
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.
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
"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
Last updated
Was this helpful?