Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Components

Textarea

Used to enter long text input which spans over multiple lines

banner-Textarea

Anatomy

Usually we use it for a large amount of text, perhaps in response to an open-ended question, qualitative feedback or notes on a game, opt for the text area over an text field.

textarea guideline anatomy
  1. Label : indicates what you want the user to input in the text area.
  2. Placeholder : a short hint that describes the expected value of an input.
  3. Caption (optional) : provides contextual assistance like helper text, in any area where the user might need additional information to provide the right input.

Usage

Text areas are fields that span multiple lines. We recommend using text area fields when the requested input text is expected to span multiple lines. Text areas are commonly used in forms.

Common places textarea appear: Forms

When to use

  • To collect longer answers from users.
  • To gather detail information with guidance on what to enter.

When not to use

  • For short and simple user input.
  • For longer responses that users can upload.

Accessibility

For the accessibility and touch target of users You must label text areas. Placeholder text is not a suitable substitute for a label, as it disappears when users click inside the text area. Labels must be aligned above the textarea they refer to. They should be short, direct and written in sentence case. Do not use colons at the end of labels.

Alt text

Do : With label

You should label text area to make sure user know what to input in there

Alt text

Don't : Without label

Placeholder text is not a suitable substitute for a label, as it disappears when users click inside the text area

Content

When creating Text Area :

  • Use lables , they’re especially important for people who don’t see other visual cues. But they also help everyone know exactly what to enter
  • Use help and error messages or indicatorUse help messages to guide users before they enter anything and clear calm error messages when there’s a problem with what they entered.
  • Show a hint in a text area to help communicate its purpose.
Alt text

Do : For long text input

use a text area when the requested input text is expected to span multiple lines

Alt text

Don't : For short text input

use a text area when the requested input text could be answered in short text