Text Area

React Text Area components are used to collect longer, multi-line text input from users. They are commonly used for messages, descriptions, feedback forms, comments, and notes where a single-line input is not sufficient.

Installation

npx @tailgrids/cli add text-area

Anatomy

Import the component and pass the required props.

import { TextArea } from "@/components/tailgrids/core/text-area";

export default function TextAreaExample() {
  return (
    <TextArea name="message" placeholder="Write your message..." rows={5} />
  );
}

Examples

Basic Usage

Compose the TextArea component with a Label and optional Description for a complete form field.

Controlled

Create a controlled textarea by passing value and onChange props to manage the input state externally.

Uncontrolled

Add defaultValue prop to the container field to pass an initial value.

Note: React Aria manages inputs through context, so the defaultValue prop must be passed to the container field (TextField) rather than the TextArea itself for uncontrolled usage.

States

Pass state for visual variants like error and success. Use the Description or FieldError component to provide feedback messages for each state.

Disabled

Prevent user interaction and reflect an inactive state by setting the disabled prop to true.

Note: disabled prop can be passed to either the TextArea or the container field (TextField) to disable the entire field.

Rows

Control the visible row count with the native rows prop.

With Validation

Validation can be implemented through the container field (TextField) using the validate prop. The invalid prop can also be used to manually set the error state.

API Reference

TextArea

Extends the native textarea element props and the React Aria textarea primitive props.

Accessibility

• Use a visible Label element when the field needs an accessible name.
• Use a description slot or helper text for supplemental guidance.
• The textarea remains a semantic <textarea> element and supports native keyboard interaction.
• Disabled, read-only, and invalid states are communicated visually and programmatically.
• When used inside a React Aria Form, validation can be driven by validationBehavior, required, and custom validation logic.