TextArea
Component for entering multiline text input.
The <TextArea> is a form component that allows users to enter and edit multiline text content with a keyboard. It consists of a textarea input field, a label, and optional help text that can also display error messages for validation feedback.
It behaves similarly to the <TextField> component but is designed specifically for longer, multiline text input. The properties have identical behavior to those in <TextField>.
You can also add all usual properties from the HTML textarea element.
Anatomy
A textarea consists of an input area that accepts multiline text, and a label which informs the user about the content they need to enter. <TextArea> automatically manages the relationship between these elements and supports optional description and error message elements for providing context and validation feedback.
Appearance
The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.
| Property | Type | Description |
|---|---|---|
variant | - | The available variants of this component. |
size | - | The available sizes of this component. |
Usage
Use a <TextArea> when users need to input longer text content that spans multiple lines, such as comments, descriptions, feedback, or any free-form text that cannot be effectively captured in a single-line text field.
The <TextArea> is ideal for content like product descriptions, user reviews, messages, notes, or any scenario where users might need to write several sentences or paragraphs. It provides enough space for users to compose and review their text before submission.
When to use TextArea vs TextField
Choose <TextArea> over <TextField> when you expect users to enter more than a few words or when the content naturally spans multiple lines. Use <TextField> for single-line inputs like names, emails, or short responses.
Do
Use TextArea for longer text content like comments, descriptions, or feedback that spans multiple lines.
Don't
Don't use TextArea for short, single-line inputs like names or email addresses.
Labels and placeholders
Keep labels short and descriptive. The label should clearly indicate what type of content is expected. Avoid using placeholder text as a replacement for labels, as it disappears when users start typing and can cause accessibility issues.
Do
Use clear, concise labels that describe the expected content.
Don't
Don't rely on placeholder text as the primary way to indicate what content is expected.
Sizing and rows
Set an appropriate initial height using the rows prop to give users a visual hint about how much content is expected. For short responses, 3-4 rows is usually sufficient. For longer content like detailed feedback or descriptions, consider 6-8 rows or more.
Do
Set an appropriate number of rows that matches the expected content length.
Don't
Don't use too few rows for content that typically requires more space, as it creates a poor user experience.
Props
TextArea
Prop
Type
Accessibility props (9)
Prop
Type
DOM event handlers (73)
Prop
Type