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 textarea
01

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_new
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

PropTypeDefaultDescription
labelstringField label shown above the textarea.
descriptionstringHelper text displayed below the field when there is no error.
errorstringValidation 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.
disabledbooleanfalseDisables input interaction and dims the field.
classNamestringAdditional classes merged into the root wrapper.
React Principles