Skip to content
Caseroom

Caseroom

Components and blocks in black and white.

Components · Forms

Textarea

A multi-line field that grows with its content.

39% of the 2,062 sites in The UI Index have a form (806 sites).

Both previews render the same markup; the HTML tab below is that markup without a framework.

Install

React
npx shadcn@latest add https://www.themes.dev/caseroom/r/textarea.json
Astro
npx shadcn@latest add https://www.themes.dev/caseroom/r/astro/textarea.json

Or copy the files below into your project. They need clsx, tailwind-merge, and the Caseroom theme. The HTML needs only the compiled CSS.

textarea.tsx
import type { TextareaHTMLAttributes } from 'react';
import { cn } from '@/lib/utils';
import { fieldClasses } from '../input/input.variants';

export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;

/** A multi-line field that grows with its content where the browser supports field-sizing. */
export function Textarea({ className, ...props }: TextareaProps) {
  return <textarea className={cn(fieldClasses, 'min-h-20 py-2 [field-sizing:content]', className)} {...props} />;
}