TextArea

React TextArea 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.

This TextArea component is built with React and styled using Tailwind CSS. It supports labels, hint text, validation states, and works in both controlled and uncontrolled form setups.

Installation

Usage

Import the component and pass the required props.

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

export default () => (
  <TextArea label="Message" placeholder="Write your message..." />
);

Examples

Default

<TextArea label="Message" placeholder="Write something..." />

With Hint

<TextArea
  label="Bio"
  hint="Tell us a little about yourself."
  placeholder="Your bio..."
/>

Error State

<TextArea
  label="Feedback"
  state="error"
  hint="Feedback cannot be empty."
  placeholder="Enter feedback..."
/>

Success State

<TextArea
  label="Description"
  state="success"
  hint="Looks good!"
  placeholder="Enter a short description..."
/>

Disabled

<TextArea label="Notes" disabled placeholder="Disabled textarea..." />

API Reference

TextArea

Extends textarea element props.

Accessibility

• Label is automatically associated using a generated id and htmlFor.
• Uses semantic <textarea> element.
• Fully keyboard accessible
• Disabled state is communicated visually and programmatically
• Validation feedback is available through visible messaging

Notes

• States are powered by class-variance-authority for easy extension.
• Hint text color updates based on the current state
• Fully compatible with controlled and uncontrolled form usage
• Supports all standard textarea HTML attributes