Textarea

A multiline input area designed for entering extended text, such as messages, descriptions, or comments.

Example

Installation

Install following dependencies:

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion

Add cn helper using clsx and twMerge for conditional class merging in Tailwind components.

lib/utils.ts

Copy and paste the following code into your project.

components/ui/core/text-area.tsx
npx @libravelui@latest add text-area

Anatomy

import { Label } from "@/components/ui/core/field";
import { Textarea } from "@/components/ui/core/text-area";
import { TextField } from "@/components/ui/core/text-field";
<TextField className="w-72">
  <Label>Synopsis</Label>
  <Textarea />
</TextField>

With Form

This example demonstrates how to integrate the textarea component within a form context, showcasing form validation, error handling, and submission behavior seamlessly.

Props

Loading types…