Textarea

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

Example

Usage

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.

Usage

Props

Loading types…

Accessible React component library to copy, customize, and own your UI. Built for Next.js, Vite, and Laravel.

Crafted by dervyon. Peep the Source Code on GitHub.

Hosted on Vercel. The source code's got the MIT license.

2025 - 2026 · LibravelUI

Starter Kits

Templates

    Coming Soon

Labs