TextArea is a multi-line text input for collecting longer-form content like comments, descriptions, or messages. Use it when the expected input spans multiple lines. For shorter, single-line values, use TextInput.
ts
| Guidance | Practices |
|---|---|
| Do | Provide a visible label so users know what to enter. If the label must be hidden, set isLabelHidden with a descriptive label for screen readers. |
| Do | Set maxLength with a character counter when there is a defined limit; it helps users stay within bounds before they submit. |
| Do | Use the status prop to surface validation feedback inline: show success when input is valid, warning for soft limits, and error for hard failures. |
| Do | Add a description or placeholder to clarify expected content, like "Describe the issue in detail," but never rely on placeholder alone as the only label. |
| Don't | Avoid using TextArea for short, single-line values like names or emails; use TextInput instead. |
| Don't | Don't rely solely on placeholder text to communicate the purpose of the field; placeholders disappear on focus and are not accessible labels. |
| Don't | Don't show a status message without also setting the status type; the colored border and icon are what draw the user's attention to the message. |
Textareas with maxLength and a live character counter. The counter turns red when the limit is exceeded.
Required, disabled, and loading textareas side by side. Shows the interactive states the component supports.
All three status variants (error, warning, and success) with status messages, plus error without a message. Use to show inline validation feedback as the user types.
Textareas with a leading icon that hints at the expected content, like a chat bubble for messages or a pencil for notes.