GitHub

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

Theme preview

Theme preview

Theme preview

Dark

Theme preview

Theme preview

Theme preview

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