Description
ONGOING
A text area is a multi-line text input control.
Used when the expected user input is long.
Usage & Behavior
General guidelines
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
Hover - hovering the text area will change the cursor to text cursor.
Active -
Clicking the text area will place the cursor at the cursor position and the hint text will disappear.
Double clicking a word inside the text area will select that word.
Triple clicking the text area will select the whole text in the text area, if exists.
Non active - If no text was inserted, the hint text will be displayed again when the field will lose focus.
If a character limit was set, reaching the limit will prevent the user from keeping typing.
Text areas have a fixed height. A vertical scroll is added when the cursor reaches the bottom of the field.
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.
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.
Accessibility compliance
<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
Current appearances in our products
WFM → Queue Analytics → Create Statistics View
