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
Document the migration steps and rollout notes.
Theme preview
Document the migration steps and rollout notes.
Theme preview
Document the migration steps and rollout notes.
Theme preview
Dark
Document the migration steps and rollout notes.
Theme preview
Document the migration steps and rollout notes.
Theme preview
Document the migration steps and rollout notes.
Theme preview
02
Live Demo
Explore all variants and interactive states in Storybook.
Open Storybookopen_in_newSize
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. |