Text Area
Text areas provide a larger, multi-line input field for users to enter longer blocks of text. They are typically used for comments, descriptions, or any input that requires more space.
Overview
Text areas are useful for scenarios that involve multi-line text, such as user comments, product reviews, or message composition. It provides enough space for paragraphs or detailed responses.
When to use
Use a text area when users are expected to write detailed descriptions, comments, or other content requiring multiple lines.
In forms where users submit reviews, feedback, or suggestions, text areas provide the necessary space for comprehensive responses.
Use text areas in messaging applications or contact forms, where users need more room to type extended messages.
Text areas should be used for longer inputs, whereas text fields are better suited for single-line or short text inputs.
When not to use
Avoid using text areas for short, one-line inputs like names, emails, or titles. A text field is more appropriate in these cases.
If the user needs more control over formatting (e.g., bold text, bullet points), consider using a rich-text editor rather than a simple text area.
In forms that prioritize brevity and speed, using text areas can overwhelm users, stick to text fields in this case.
If the available screen space is limited, a text area may appear too large. Optimize the design for smaller screens.
If users are required to input structured data (like numbers or dates), a more controlled component, like a text field or date picker, would be more suitable.
Anatomy
Label: Describes the purpose of the text area to the user, positioned above the input field for clarity.
Tag: A small indicator next to the label to categorize or highlight the type of input.
Count: Displays the number of characters remaining or used in the text area, useful when there is a character limit.
Icon Leading: An optional visual element placed at the beginning of the text area, used to indicate a specific type of input.
Icon Trailing: An optional icon at the end of the text area, often used for additional actions like clearing text or showing help.
Placeholder Text: Temporary text that provides guidance or examples of what the user can input into the text area.
Input Field: The main interactive area where users type their content. It expands to accommodate multiple lines.
Support Message: Provides additional context or instructions to help the user fill out the text area correctly.
Hint: A subtle piece of information that offers insight into the expected input, displayed under the text area.
Styles
States
Size
Small
14
20
8
120
Medium
14
20
8
137
Large
16
24
8
137
Accessibility
Keyboard Navigation: Ensure that users can easily navigate in and out of the text area using the keyboard, including shortcuts for text selection and editing.
Clear Focus Indicator: A visible focus state must be applied when the text area is selected, making it clear which field is active for users with low vision or keyboard navigation.
Screen Reader Labels: Provide clear, descriptive labels and instructions for screen reader users, so they understand the purpose of the text area and any associated guidance.
Responsive and Scalable: The text area should be flexible and adjust to various screen sizes, especially on mobile devices.
Text Length Counter: If there is a character limit, provide a visible counter so users know how many characters they have remaining.
Example
Feedback Form: A text area can be used in a feedback form, allowing users to provide detailed comments and suggestions.
Comment Section: On blogs or social media platforms, text areas are used for users to write comments or responses.
Support Ticket Submission: In customer service forms, text areas are ideal for users to describe their issues or concerns in detail.
Message Composition: In email or messaging platforms, text areas are used to draft messages or longer responses.
Blog Post Submission: Text areas can be used in content management systems, allowing writers to compose and submit articles or blog posts.
Last updated