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. A hint text in the text field represents an example of what you want the user to enter. This will be overwritten as soon as the user starts typing.
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.
Validations and errors
See additional information in Field Validation.
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 |
|
