TextArea

TextArea allows for multi-line input.

also known as Multi-line Input

An text area field labeled About You, with text entered.

Usage guidelines

When to use
  • Allowing users to input more than a single line of free-form text while ensuring all text entered remains visible
When not to use
  • For inputs that expect a certain format, like a date or email. Use a TextField instead

Best practices

  • Use a label to clearly denote what information the user should input. Use placeholder sparingly as they can erode usability of form fields
  • Use helper text to provide additional context that will aid the user in most effectively inputting information
  • Set the height of TextArea using text rows to ensure the typical amount of text will be visible without needing to scroll
  • Don’t set the row number to less than 2. Use TextField when expecting ony a single line of text
  • Consider all text fields as required, unless explicitly noted as optional on the label

For general TextArea best practices, refer to the web Text Area Documentation.

Accessibility

People use Android's accessibility features, such as TalkBack and dynamic text sizing to personalize how they interact with their devices. Supporting these personalizations ensures that everyone has a great user experience. See Material Design and development documentation about accessibility for Android:

Accessible design on Android


Accessible development on Android
, Opens a new tab

Comprehension

Be sure to provide instructions

to help users understand how to complete the form and use individual form controls.

Labels

Ensure the labels are precise and concise. Labels should only describe the text field they are associated with, and they must be visible.

Validation

When providing a validation message, make sure the instructions are clear and help users complete the field. For example, "This field is required to submit". In addition, use the helper text to provide instructions to help users understand how to complete the text field or to indicate any needed input, allowed formats, timing limitations, or other pertinent information.

These practices give users of assistive technologies more information about the form, helping them to fill it out.

Design tokens

Anatomy

1. Container | 2. Content | 3. Label | 4. Helper text | 5. Max length text

Variants

Default

TextArea will expand to fill the width of the parent container by default.


Helper text

Whenever you want to provide more information about a form field, such as specific formatting, description of the label or requirements, you should use helperText.


Disabled

TextArea can be disabled to indicate the user is unable to interact with it. Disabled fields do not need to pass contrast requirements, so do not use a disabled TextArea to present information important information to the user.


Error

TextArea can display an error message. Don't use errorMessage to provide feedback on character count errors. See the maximum length variant below for more details.


Maximum length

TextArea supports a max length. This variant sets the maximum number of characters allowed to be entered by the user in TextArea and the user cannot exceed the maximum number of characters interacting with the component.
When a max length is used in TextArea, the component displays a character counter as well as a warming or problem Status when the user reaches or exceeds the maximum length of characters.

Warning

Error

Color

Overview of how TextArea colors look in both themes.


Writing

For writing best practices, refer to the content standards.

Do
  • Use super-simple language and help users solve the problem when writing error messages. Refer to Error messages standards for more information
Don't
  • Display generic error messages, such as "There is an error"