Text area

A text area is a form control that allows users to enter and edit multiple lines of text. It's designed for collecting long-form content such as comments, messages, or detailed descriptions.

When to use

Comments and feedback

Use for comment fields, feedback forms, or posts.

Comments and feedback

Use for comment fields, feedback forms, or posts.

Comments and feedback

Use for comment fields, feedback forms, or posts.

Detailed descriptions

When you need users to provide a detailed description, like for a support ticket or a product profile.

Detailed descriptions

When you need users to provide a detailed description, like for a support ticket or a product profile.

Detailed descriptions

When you need users to provide a detailed description, like for a support ticket or a product profile.

Messaging

For composing messages in a chat or email interface.

Messaging

For composing messages in a chat or email interface.

Messaging

For composing messages in a chat or email interface.

Exceeding one line

Anywhere the expected user input is likely to exceed a single sentence of text.

Exceeding one line

Anywhere the expected user input is likely to exceed a single sentence of text.

Exceeding one line

Anywhere the expected user input is likely to exceed a single sentence of text.

When to avoid

Single-lined input

For brief information like names, emails, or search queries, use a text input to save space and better indicate the expected length.

Single-lined input

For brief information like names, emails, or search queries, use a text input to save space and better indicate the expected length.

Single-lined input

For brief information like names, emails, or search queries, use a text input to save space and better indicate the expected length.

Formatted content

If users need to apply formatting like bold, italics, or lists, a rich text editor is more appropriate.

Formatted content

If users need to apply formatting like bold, italics, or lists, a rich text editor is more appropriate.

Formatted content

If users need to apply formatting like bold, italics, or lists, a rich text editor is more appropriate.

Specifications

Label placement

Stacked

Please note that the stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.

Left

Please note the wrapping and truncation rules for the left to right version and how the optional label is below the label.

Stacked

Please note that the stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.

Left

Please note the wrapping and truncation rules for the left to right version and how the optional label is below the label.

Stacked

Please note that the stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.

Left

Please note the wrapping and truncation rules for the left to right version and how the optional label is below the label.

Vertical resize

Auto

The text area automatically grows in height to fit the content as the user types.

Custom

The text area has a custom fixed height, and a scrollbar appears if the content overflows.

Auto

The text area automatically grows in height to fit the content as the user types.

Custom

The text area has a custom fixed height, and a scrollbar appears if the content overflows.

Auto

The text area automatically grows in height to fit the content as the user types.

Custom

The text area has a custom fixed height, and a scrollbar appears if the content overflows.

Auto

The text area automatically grows in height to fit the content as the user types.

Custom

The text area has a custom fixed height, and a scrollbar appears if the content overflows.

Anatomy

Label

Should indicate some kind of instruction for selection. If majority of fields are required in a single form, the "Option" label can be toggled on. If majority of fields are optional, the "Required asterisks" should instead be toggled on.

Content

Contains optional placeholder text or valued content input by the user.

Assistive text

For additional instructions, formatting requirements, or validation messages.

Character count

Displays the current number of characters entered relative to the maximum allowed limit.

Container

The multi-line input area that can be configured to have a custom height or a default fixed height before content truncation.

Value

Text area