Textarea
About
A Text area allows users to enter longer texts or data, such as feedback, detailed explanations, or messages.
Anatomy
A Text area consists the following mandatory and optional elements:
- Border
- Label
- Help icon (optional)
- Hint text (optional)
- Placeholder text (optional)
- Indicator (optional)
- Character counter (optional)
- Enlarge indicator (optional)
When to use
Use a Text area when you want to allow users to enter a long text or data.
When not to use
Do not use a Text area when the data required to enter is defined to be short, such as dates, names, URLs, amounts, etc.
Error status
A Text area can receive an error status when it is mandatory and still empty when users try to submit.
Behaviour
Character counter
A Text area can be presented with a character count to show users that there’s a limit of characters that can be added.
Resize indicator
A Text area can be presented with an indicator that shows users that a Text area can be enlarged. A Text area can be resized in height, so vertically.
Keyboard behaviour
Tab
- Moves focus to the Icon button (help icon) if showcased first.
- Then moves to the input.
- Proceeds to next interactive element, such as another input or to a submit button.
Arrow left/right
- Moves cursor within the text.
Nesting components
A Text area component can use:
- Icon component
A Text area component can be used in:
- Forms pattern
- Dialog component
Resources
Events
| Component | Event | Description | Details |
|---|---|---|---|
<r-textarea /> | rInput | Emitted immediately after component’s value change. |
|
rChange | Emitted if components value changes after element loses focus. | ||
rReset | Occurs when a form is reset (resets component’s value to initial). |