TextArea allows for multi-line input.

Props

Name
Type
Default
Required
string
-
Required
({ event: SyntheticInputEvent<HTMLTextAreaElement>, value: string }) => void
-
boolean
false
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.

string
-

More information about how to complete the form field

label
string
-
name
string
-
onBlur
({ event: SyntheticFocusEvent<HTMLTextAreaElement>, value: string }) => void
-
onFocus
({ event: SyntheticFocusEvent<HTMLTextAreaElement>, value: string }) => void
-
onKeyDown
({ event: SyntheticKeyboardEvent<HTMLTextAreaElement>, value: string }) => void
-
string
-
React.Ref<"textarea">
-

Forward the ref to the underlying textarea element

rows
number
3

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

Array<Element<typeof Tag>>
-

List of tags to display in the component

string
-

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.

Example

A TextArea will expand to fill the width of the parent container.

Example: Disabled

Example: Helper Text

Whenever you want to provide more information about a form field, you should use helperText.

I love to sail, run and visit remote places

Example: 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.

This field can't be blank!

Example: ref

A TextArea with an anchor ref to a Popover component

Example: 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.

San Francisco
New York

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 the TextArea
in a form and attach an onSubmit handler to that form.