- Use when the user needs to input a longer unique information that cannot be predicted with a preset list of options.
Textarea
A textarea is an interactive element that allows users to input and display multiple lines of text within a user interface.
Overview
The purpose of textareas is to provide users with a larger input space for writing and editing text that requires more than one line. They offer a more user-friendly and efficient way to input and view longer pieces of textual information within a single user interface element.
Textareas differ from text inputs as they allow for multiline input, where users can freely type or paste more extensive content. They are commonly used in forms, text editors, messaging interfaces and any scenario where users need to input or view longer blocks of text.
Dos and Don’ts
- Don’t use if it is likely that the input will not exceed one line, if this is the case use a text input instead.
Anatomy
- Form label (optional): The form label provides necessary content / information to the form.
- String: Placeholder or user inputted value.
- Resize tab (optional): Allows the user to manually resize the form container.
- Assistive text (optional): The assistive text provides additional instructional information / error / success messaging.
Variations
Default
Modifiers
Type
Height
The height, unlike the width, of a textarea is flexible, with two different options available.
Sizes
Use a consistent height when it is being used alongside other form components on the same page.
Large
Choose this size when there is a lot of space to work with. This size is typically used in simple forms or when a textarea is placed by itself on a page.
| Textarea size | Default height | Minimum height | Maximum height |
|---|---|---|---|
| Large | 80px | 80px | 176px |
| Medium | 72px | 72px | 168px |
| Small | 64px | 64px | 160px |
Manual-resize
| Textarea size | Default height[Desktop] | Minimum height[Desktop] | Maximum height[Desktop] | Fixed height[Mobile] |
|---|---|---|---|---|
| Large | 80px | 56px | N/A | 176px |
| Medium | 72px | 48px | N/A | 168px |
| Small | 64px | 40px | N/A | 160px |
Content
Placeholder
Use clear placeholder text so that users understand the purpose of the textarea.
Input types
Alphanumeric
Both letters, numbers and certain special characters are allowed, for the majority of use-cases this will be used.
Behaviours
Form inputs
When typing into a textarea and reaching the end of the field, the cursor should remain as static in the bottom right corner (for left-to-right languages) while text above it overflows through the top of the field. When the field loses focus, text should overflow through the bottom of the text area, showing the beginning of the text.
Auto-resize
Manual-resize
Character counter
The character limit and counter is used to let users know how long their entry can be before they begin typing.
Mobile devices
Manual-resize
The manual-resize feature on mobile devices doesn't provide an optimal user experience. Therefore, it's replaced with a fixed height that enables users to scroll vertically.
Interactive states
Outlines the atomic level interactive elements for the component.
Examples
LTR examples
Here are some examples of textareas in a left-to-right context:
RTL examples
Here are some examples of textareas in a right-to-left context:
Resources
| Stable | |
| Stable | |
 Web Components | Planned |
| Stable | |
| Stable | |
 iOS JustUI [UI Kit] | N/A |
 iOS PIE [SwiftUI] | N/A |
 Android PIE [Compose & Views] | N/A |
