Components
Textarea
Used to enter long text input which spans over multiple lines
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.
- Label : indicates what you want the user to input in the text area.
- Placeholder : a short hint that describes the expected value of an input.
- 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.
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.