The TextArea component is built using a native HTML <textarea> element. The textarea is wrapped within a FormControl component that manages the association between it and its <label>, description, and error message elements using generated IDs.

ARIA

table
Element	Attribute	Description
Field	`aria-describedby`	References assistive text that describes the field. When both a description and an error are present, both IDs are included, description first.
Field	`aria-invalid`	Set when the field is invalid, either through `isInvalid` or by an `error` being present, so the invalid state is not conveyed by the border color alone.
Field	`aria-label`	Provides an accessible name when no visible label is rendered.
Field	`aria-labelledby`	References the visible label element's ID. When an `ariaLabelledby` prop is also provided, both IDs are included.

Autofill

TextArea disables autofill by default. It sets autocomplete="off" along with opt-out attributes for the common password managers, so that they don't inject their own UI into fields where it isn't wanted.

That default has an accessibility cost, so set shouldAllowAutofill on any field that collects information about the user. Autofill is what lets people who rely on a password manager, or who find typing long strings difficult or error-prone, complete a form at all. Suppressing it works against 1.3.5 Identify Input Purpose.

Leave the default in place where autofill would be actively wrong, such as a free-text note whose value is unrelated to the person filling it in.

Labels

We highly recommend adding visible labels with the label prop to prevent a lapse in communication. If a visible label is unneeded for the use case, add an ariaLabel or ariaLabelledby so assistive technology will announce the TextArea to the user. Omitting a label will result in an error.

Never use a placeholder in place of a label — placeholders are not reliably announced to assistive technology, and they disappear as soon as the user starts typing.

Submitting

shouldSubmitOnEnter makes Enter submit the surrounding form rather than insert a newline. Use it sparingly: it removes the ability to enter a line break, which is the behavior a user expects from a multi-line field. Where it is used, make the behavior clear in the field's description rather than leaving the user to discover it.

Keyboard

table
Key	Function
`Enter`	Inserts a newline. Submits the form instead when `shouldSubmitOnEnter` is set.
`Tab`	Moves focus to the next focusable element.
`Shift`+`Tab`	Moves focus to the previous focusable element.

TextArea

Structure

ARIA

Autofill

Labels

Submitting

Keyboard

On this page