Components
Text Area
A multi-line text input with built-in invalid state support and a form-friendly onChange signature
Installation
- $npx litefy@latest add text-area
- $pnpm dlx litefy@latest add text-area
- $yarn dlx litefy@latest add text-area
- $bun --bun litefy@latest add text-area
Usage
Basic textarea with default, invalid and disabled states.
"use client";import { Textarea } from "@/ui";export default function Demo() { return ( <div className="flex w-full max-w-sm flex-col gap-4"> <Textarea placeholder="Leave a comment..." /> <Textarea invalid placeholder="Invalid state" /> <Textarea disabled placeholder="Disabled state" /> </div> );}API Reference
High-level Components
Ready-to-use composite components.
Textarea
The native textarea element with built-in styles: full width, rounded border and focus ring, min-h-20 with resize-y, and invalid styles driven by data-invalid.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | Controlled value (narrowed to string, unlike the native value) |
className | ClassNameValue | - | Custom class name |
invalid | boolean | - | Marks the textarea invalid; sets aria-invalid and data-invalid, applying the invalid border/ring styles |
onChange | (e: React.ChangeEvent<HTMLTextAreaElement>) => undefined | { invalid?: string } | - | Native change callback; may return { invalid?: string } for form integration |
...props | React.ComponentProps<"textarea"> | - | Supports all native textarea props (except value and onChange, which are overridden above) |