TextArea allows for multi-line input.

Props

Component props
Name
Type
Default
id
Required
string
-

A unique identifier for the input.

onChange
Required
({| event: SyntheticInputEvent<HTMLTextAreaElement>, value: string, |}) => void
-

Callback triggered when the value of the input changes.

disabled
boolean
false

Indicate if the input is currently disabled. See the disabled example for more details.

errorMessage
React.Node
-

For most use cases, pass a string with a helpful error message (be sure to localize!). In certain instances it can be useful to make some text clickable; to support this, you may instead pass a React.Node to wrap text in Link or TapArea. See the error message example for more details.

hasError
boolean
false

This field is deprecated and will be removed soon. Please do not use.

helperText
string
-

More information about how to complete the form field. See the helper text example for more details.

label
string
-

The label for the input. Be sure to localize the text.

labelDisplay
"visible" | "hidden"
"visible"

Whether the label should be visible or not. If hidden, the label is still available for screen reader users, but does not appear visually. See the label visibility variant for more info.

name
string
-

A unique name for the input.

onBlur
({| event: SyntheticFocusEvent<HTMLTextAreaElement>, value: string, |}) => void
-

Callback triggered when the user blurs the input.!

onFocus
({| event: SyntheticFocusEvent<HTMLTextAreaElement>, value: string, |}) => void
-

Callback triggered when the user focuses the input.

onKeyDown
({| event: SyntheticKeyboardEvent<HTMLTextAreaElement>, value: string, |}) => void
-

Callback triggered when the user presses any key while the input is focused.

placeholder
string
-

Placeholder text shown the the user has not yet input a value.

readOnly
boolean
false

Indicate if the input is currently readOnly. See the readOnly example for more details.

ref
React.Element<"input">
-

Ref that is forwarded to the underlying input element. See the ref example for more details.

rows
number
3

Number of text rows to display. Note that tags take up more space, and will show fewer rows than specified.

tags
$ReadOnlyArray<Element<typeof Tag>>
-

List of tags to display in the component. See the tags example for more details.

value
string
-

The current value of the input.

Usage guidelines

When to use
  • Allowing users to input long portions of free-form text while ensuring all text entered remains visible.
  • Allowing users to type free-form options that get converted into Tags within the TextArea.
When not to use
  • For inputs that expect a certain format, like a date or email. Use a DatePicker or TextField instead.

Best practices

Do

Use TextArea as an affordance to input longer-form text content — typically anything longer than a brief sentence.

Don't

Use TextArea when the text input is a single, non-sentence response — even in cases with long content. Use TextField instead.

Do

Use label to clearly denote what information the user should input. Use placeholder sparingly as they can erode usability of form fields.

Don't

Use placeholder as a replacement for label, as this creates accessibility and usability issues.

Do

Use helperText to provide additional context that will aid the user in most effectively inputing information.

Don't

Use placeholder to provide any information necessary to filling out the form field. Placeholder text disappears after the user begins entering data and should not contain crucial information.

Do

Set the height of TextArea using row to ensure that the typical amount of text entered will be visible without needing to scroll.

Don't

Set the row prop to less than 2. Use TextField when expecting only a single line of text.

Accessibility

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. If you cannot use the label prop, ensure the alternative label's htmlFor attribute matches the TextArea's id. Labels are properly associated when clicking the label focuses the TextArea.

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.

Keyboard navigation

TextArea has conventional keyboard support.

  • Users relying on the keyboard expect to move focus to each TextArea by using the tab key or shift+tab when moving backwards.
  • Setting disabled will prevent TextArea from receiving keyboard focus or input.

Autofocus

TextArea intentionally lacks support for autofocus. Generally speaking, autofocus interrupts normal page flow for screen readers making it an anti-pattern for accessibility.

onSubmit

TextArea is commonly used as an input in forms alongside submit buttons. In these cases, users expect that pressing Enter or Return with the input focused will submit the form.

Out of the box, TextArea doesn't expose an onSubmit handler or individual key event handlers due to the complexities of handling these properly. Instead, developers are encouraged to wrap TextField in a <form> with an onSubmit handler.

Localization

Be sure to localize errorMessage, helperText, label, and placeholder.

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, you should use helperText.

Label visibility

In some cases, the label for a TextArea is represented in a different way visually, as demonstrated below. In these instances, you can set labelDisplay="hidden" to ensure TextArea is properly labeled for screen readers while using a different element to represent the label visually.

Read-only

TextArea can be in read-only mode in order to present information to the user without allowing them to edit the content. Typically this variation is used to show content or information that the user does not have permission or access to edit.

Disabled

TextArea can be disabled to indicate the user is unable to interact with it, either by mouse or keyboard. Disabled fields do not need to pass contrast requirements, so do not use a disabled TextArea to present information to the user (use readOnly instead).

Error message

A TextArea can display its own error message.
To use our errors, simply pass in an errorMessage when there is an error present and we will handle the rest.

With a ref

A TextArea with an anchor ref to a Popover component

With tags

You can include Tag elements in the input using the tags prop.

Note that the TextArea component does not internally manage tags. That should be handled in the application state through the component's event callbacks. We recommend creating new tags on enter key presses, and removing them on backspaces when the cursor is in the beginning of the field. We also recommend filtering out empty tags.

This example showcases the recommended behavior.

TextField
TextField is ideal for short-form, single answer text input.

Tag
Tag can be used in conjunction with TextArea to display separate elements of content.

ComboBox
ComboBox + Tag is the recommended alternative to TextArea + Tag when selecting from a finite list list of items.