Text Area @astryx-svelte/core v0.3.0 · TextArea
Usage
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
Best practices
| 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. |
| Don't | Don't wrap a disabled TextArea in Tooltip to explain why it's disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead. |
Examples
Common configurations, variations, and states.TextArea — Character Count
Textareas with maxLength and a live character counter. The counter turns red when the limit is exceeded.
TextArea — States
Required, disabled, and loading textareas side by side. Shows the interactive states the component supports.
TextArea — Validation
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.
TextArea — Icon
Textareas with a leading icon that hints at the expected content, like a chat bubble for messages or a pencil for notes.