Best practices
Use a text area when the expected user input is more than a few words and could span multiple lines. It is commonly used for features like user commentary or descriptions. Text area has several unique functionalities not included in the default text input, like the resize handle and character counter.
Make sure to read the general Forms patterns best practices for more details.
When to use
- Allowing users to input long portions of free-form text while ensuring all text entered remains visible.
When not to use
- When the text input is a single, non-sentence — even in cases with long content. Use TextInput instead.
- For inputs that expect a certain format, like a phone number, date or email. Use a Phone Number or TextInput instead.
Anatomy
- Label: Text that clearly indicate the user about the content they need to enter in the field. It is required unless you get an approved accessibility exemption.
- Placeholder (optional): Optional placeholder text provides hints or examples of what to enter. Placeholder text disappears after the user begins entering data into the input and should not contain crucial information.
- Resize handle (optional): Allows a user to change the field height by making it longer or shorter.
- Helper text (optional): Assistive text that can provide additional aid or context to the user. Often used to explain the correct data format or limitations.
- Field value: User entered content.
- Word count (optional): When there’s a limit to the amount of words, a counter helps the user keep track and conveys the limitation without additional explanation.
Use label to clearly indicate what information to input. Use placeholder sparingly as they can erode usability of form fields.
Don’t use placeholder as a replacement for the label, or as a mean to provide any input constraints such a max character, as this creates accessibility and usability issues.