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.

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

Installation

npx @tailgrids/cli add text-area

Usage

Import the component and pass the required props.

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

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

Examples

With Label

Use the label prop to describe the text area.

Note: Labels are non-selectable with select-none for better UX.

With Hint

Use the hint prop to show helper text below the text area.

Note: The helper text uses peer class to enable styling based on text area state.

Success

Indicating successful validation or a positive outcome by using the state="success" prop.

Note: The border and focus ring colors change to success green to indicate a valid state.

Error

Highlight errors or validation failures to the user by setting the state="error" prop.

Note: Focus ring color matches the state (primary for default, danger for error, success for success).

Disabled

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

Note: Disabled state applies reduced opacity to the text area and helper text.

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.