Textarea
Multi-line text input for notes, descriptions, and longer form content with variant, size, helper text, and validation support.
AccessibleDark Mode3 Variants3 Sizes
Install
$
npx react-principles add textarea01
Theme Preview
Light
Theme preview
Theme preview
Theme preview
Dark
Theme preview
Theme preview
Theme preview
02
Live Demo
Size
0 characters
0 characters
0 characters
03
Code Snippet
src/ui/Textarea.tsx
import { Textarea } from "@/ui/Textarea"; <Textarea label="Project notes" description="Write key updates for your team." placeholder="Type your notes here..." size="md" />
04
Copy-Paste (Single File)
Textarea.tsx
import { forwardRef, type ReactNode, type TextareaHTMLAttributes } from "react"; import { cn } from "@/lib/utils"; export type TextareaSize = "sm" | "md" | "lg"; export type TextareaVariant = "default" | "filled" | "ghost"; export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> { label?: string; description?: string; error?: string; size?: TextareaSize; variant?: TextareaVariant; children?: ReactNode; }
05
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Field label shown above the textarea. |
description | string | — | Helper text displayed below the field when there is no error. |
error | string | — | Validation message that replaces the description and applies error styling. |
size | "sm" | "md" | "lg" | "md" | Controls the minimum height, padding, and text size. |
variant | "default" | "filled" | "ghost" | "default" | Changes the surface treatment of the textarea. |
disabled | boolean | false | Disables input interaction and dims the field. |
className | string | — | Additional classes merged into the root wrapper. |