Astryx Design System

Text Area@astryxdesign/core v0.0.15 · 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
import {TextArea} from '@astryxdesign/core/TextArea'

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.

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.

Usage

import {TextArea} from '@astryxdesign/core/TextArea'

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.