Text Area
A Text Area is a multi-line input field in UX, allowing users to enter and edit free-form text
- Overview
- Specs
- Guidelines
Component
A Text Area, in UX terms, refers to a user interface element that provides users with a larger, multi-line input field for entering and editing free-form text.
It typically appears as a rectangular box on the interface, allowing users to input and manipulate text content more flexibly when compared to single-line input fields.
Text areas are commonly used for tasks such as composing messages, writing comments, or entering lengthy descriptions. They offer features such as automatic text wrapping, scrollbars to navigate through longer text, and options for resizing the input area to accommodate varying amounts of content.
1: Label
2: Placeholder/Input
3: Counter
4: Resizer
Used for:
Observations
In invoices or articles, it is necessary to make a comment about a customer/article, a text area is used to have a free-text area;
Descriptions
When creating a certain article, a full description is part of the form, where the expected value is the description of article;
Notes
As with the other two cases, notes are a free space that allows the user to take notes on a specific page/view;
Flexible formatting
They allow users to enter text with line breaks and formatting, providing more flexibility when compared to single-line input fields.
Don’t use for:
Data entry precision
For tasks requiring precise data entry, such as entering numeric values or selecting from predefined options, a text area may not provide the necessary constraints or validation;
Input validation
If input validation requirements are strict and specific, using a text area may not be suitable for enforcing validation rules and ensuring data integrity;
Excessive complexity
For simple input tasks that don’t require longer text passages, implementing a text area may introduce unnecessary complexity and cognitive load for users.
Demo
Access the Figma file and inspect the element using Dev Mode.
Last Update
- Updated typography;
- Updated label;
