💠 Textarea

A text area lets users enter long form text which spans over multiple lines.

Usage

The TextArea component allows users to enter long-form text that spans multiple lines. It is typically used in forms where more extensive user input is required, such as for feedback, comments, or any other situation where a single-line text field is insufficient.

It should be clearly labeled with an accessible name and, if necessary, include a description to guide users on the expected input. Consider the default size and whether it should reflect the average length of the content expected to be entered by users.

When to use

• For lengthy input: Use a TextArea for inputs where the user is expected to write more than a single line of text, such as a comment box or a feedback form.
• When formatting is secondary: Employ a TextArea when the format of the text is not the primary concern, and the user's focus is on entering plain text.
• In dynamic forms: Utilize TextAreas in forms that might require the user to provide detailed information, such as a registration form or a support ticket submission.
• For content creation: TextAreas are essential for content creation features where users might draft messages, articles, or any content that requires more space and visibility.

Avoid using TextAreas for inputs that should be concise or restricted to one line, such as usernames or email addresses. Similarly, they should not be used when the user input needs to be formatted in real-time, like in a rich text editor.

Ensure that TextAreas are not so large as to be overwhelming, or so small as to be restrictive for the user.

Examples

Default

Disabled

With text

With form

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager: