Text Area

The text area component is a field for plain-text input, often used in forms.

Status

PublishedElement can be used in production
PublishedElement can be used in production
Angular
Angular
PublishedElement can be used in production
React
React
In backlogElement is in backlog
Documentation
PublishedElement can be used in production

What's new

The text area component now contains an optional live character counter, helper text, and accessible behaviors, including an error state. Labels, font, and container borders have also been updated to reflect the design system’s new foundations.

When to use

The text area and text input components have different use cases. Consider character length and the type of input when choosing which to use.

ComponentUse cases
Text areaIf text exceeds more than one line, use the text area component. The larger field size encourages longer responses. It’s typically used for comments or questions in forms.
Text inputFor single-line, short entries, use the text input component. It’s commonly used for name, phone number, or email entries in forms.

Anatomy

The text area component contains six main elements, including options to display a character counter, placeholder text inside the input, helper text, and an error state.

  1. Label: describes the field entry requirement.
  2. Placeholder text: optional text within the input field.
  3. Helper text: describes the format or guidelines for the text entry.
  4. Live character counter: optional counter to display limitations on character counts.
  5. Text area: input field for text.
  6. Error state: inline validation error text, icon, and error message.

Articles

Required fields in forms

Read the Nielsen Norman Group's article on form fields.

Website forms usability

Read the Nielsen Norman Group's article on forms usability.

Feedback