Description
ONGOING
A text area is a multi-line text input control.
Used when the expected user input is long.
Usage & Behavior
General guidelines
Always provide a clear and meaningful label for any input field.
Where appropriate, help users by providing hint texts which describes the expected value of the field.
Text fields should indicate their state - enabled/disabled, empty/filled, valid/invalid.
Proactively guide users to prevent errors. Help them to identify and fix errors as they occur.
Provide an indicator when the field is required.
Structure
The text area consists of:
- Label - a meaningful label of what information the user needs to provide.
- Input Field (the input field can display a hint text).
States
Interaction
Text areas have a fixed height. A vertical scroll is added when the cursor reaches the bottom of the field.
If the input contains a hint text, it will be overwritten as soon as the user starts typing.
Validations and errors
Please refer to Field validation page for more information.
A text area with a warning will have an orange border and a warning icon, as displayed below:
A text area with an error will have a red border and an error icon, as displayed below:
The orange/red border will be removed when the content is updated to a valid.
Best practices
For short input, use the text field component.
Design
Zeplin link | Screen thumbnail |
|---|---|
| https://zpl.io/2v4yY7a |
|
