Textarea

Multi-line text input: For collecting longer, free-form responses such as comments, descriptions, messages, or feedback.
Editable content: When users need to input or edit large chunks of text.
Forms: For fields like Bio, Notes, or Detailed explanations and descriptions.

Single-line input: use Input.
Structured formats (phone numbers, dates): use masked Input, Date and time picker, Select, or Combobox.
Rich text (bold, lists): use a rich-text editor, not a plain Textarea.

Do use concise labels and placeholder copy to help users understand what information is being requested from them.
Do always allow for scroll when the Textarea reaches its max height but content continues beyond that.
Don’t set a small fixed height if it’s expected the user will input a lot of text.
Don’t force the user to scroll both horizontally and vertically inside the Textarea.
Don’t use long placeholder descriptions that repeat the label name.
Don’t use any default filled text as users may skip changing it, which could cause problems when submitting forms.

Resizing:

Textareas can optionally be resized by the user with a drag handle placed in the bottom right corner. Resizing can be forced to horizontal only, vertical only or allow for both horizontal and vertical resizing simultaneously. It’s imperative to consider the potential consequences of allowing user resizing as this can result in layout shifts.
In general, it is preferred to let the browser handle resizing or restrict to a single resize orientation (e.g., vertical) as this is more predictable for users. Below are some guidelines on when to allow for resizing vs not to.

Restrict resizing when:

Layout or design integrity must be preserved: In tightly designed forms or primitives where resizing could break the layout or overlap other UI elements. Example: Inline forms in cards, modals, or sidebars where space is limited.
Textarea size is controlled programmatically: If the textarea automatically expands as users type (autoResize prop), manual resizing is redundant or could conflict with the behavior.
Consistent user experience across devices: In responsive designs where resizing could cause inconsistent behavior on different screen sizes.
Input content is short and doesn’t require extra space: If the textarea is intended for brief responses (e.g., short notes, comments under 3 lines or limited characters), resizing is unnecessary. Instead, ensure the textarea default size will accommodate the input limitations.

Label, Helper text; optional character count in helper line; resize handle per Behavior.

Documentation Index