XDS — Design System

TextArea@xds/core v0.0.13 · XDSTextArea

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 {XDSTextArea} from '@xds/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 {XDSTextArea} from '@xds/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.