TextArea

TextArea receives much longer user text input to complete a form.

Structure

The TextArea component renders 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.

The resize handle is the browser's native control and has no accessible name. Auto-growing and resizing change only the field's height, not how its content is announced.

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.
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 opts out of autofill by default with autocomplete="off" and opt-out attributes for common password managers. This prevents the browser from offering stored data for the field.

Many users still depend on autofill to help aid cognitive disabilities or motor impairments. Set shouldAllowAutofill on fields that collect information about the user, such as a name or address. Keep the default only where stored data would be genuinely unwanted, such as a free-text note.

WCAG requires the purpose of these fields to be programmatically determinable. A valid autocomplete token, such as street-address, satisfies it. shouldAllowAutofill removes the opt-out but does not add a token on its own. For more information, see WCAG's 1.3.5 Identify Input Purpose.

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

Instead of inserting a new line, the TextArea can be made to submit the form with the Enter key when shouldSubmitOnEnter is enabled and the field is within a form. Use sparingly as it changes the default behavior a user expects from a multi-line field. If used, state both shortcuts in the description so the user is aware.

The shortcut does not check for an active input method editor (IME) composition. A user typing in a language such as Japanese or Chinese who presses Enter to confirm a composed character would also submit the form. Avoid shouldSubmitOnEnter on fields where users are likely to type with an IME. See Submit on Enter under the Design tab for when to enable it.

Keyboard

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