TextArea

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.

Installation

npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0

Requires React 19+, base CSS and a Theme provider. See Setup.

Text Area

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.

Usage guidance

• 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.
• Set maxLength with a character counter when there is a defined limit; it helps users stay within bounds before they submit.
• Use the status prop to surface validation feedback inline: show success when input is valid, warning for soft limits, and error for hard failures.
• 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.
• Avoid: Avoid using TextArea for short, single-line values like names or emails; use TextInput instead.
• Avoid: Don't rely solely on placeholder text to communicate the purpose of the field; placeholders disappear on focus and are not accessible labels.
• Avoid: 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.
• Avoid: 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.

Theming API

{
  "targets": [
    {
      "className": "astryx-text-area",
      "visualProps": [
        "size",
        "status"
      ],
      "states": [
        "disabled",
        "readonly"
      ]
    },
    {
      "className": "astryx-text-area-control"
    },
    {
      "className": "astryx-text-area-counter"
    }
  ],
  "vars": [
    {
      "name": "--_textarea-inline-padding",
      "description": "Inline padding of the textarea's text. The wrapper stays flush (padding: 0) so the native resize grip sits in the true corner; this var carries the inset on the inner <textarea>, and the start icon, status/spinner, and character counter align to it.",
      "default": "var(--spacing-2)",
      "private": true
    }
  ],
  "derived": [
    {
      "property": "paddingInline",
      "vars": [
        "--_textarea-inline-padding"
      ],
      "replaces": true
    }
  ]
}

Anatomy

• Label: Text identifying the multi-line field.
• Description: Helper text between the label and the input.
• Input container: Painted boundary containing the text area and its overlays.
• Text area: Multi-line control that displays and edits the value.
• Placeholder: Hint text shown inside the empty text area.
• Start icon: Astryx Icon rendered at the start when startIcon is a semantic name or icon component.
• Custom start content: Caller-provided ReactNode rendered at the start instead of an Astryx Icon.
• Spinner: Loading indicator shown at the end of the input container.
• Status icon: Error, warning, or success icon shown inside the input.
• Character counter: Current and maximum character counts shown inside the input container.
• Field status message: Attached or detached error, warning, or success message associated with the field.
• Tooltip status message: Tooltip surface presenting the status message for the tooltip variant.

Examples

• Text Area: A text area with placeholder text.
• 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.

Complete example dependencies

Some examples import optional icons. The per-example install command in the examples list identifies exactly what that example needs. For all examples on this page:

npm install @heroicons/react@2.2.0