Skip to content
themes.dev
    Style: Wireframe

    Components

    56 free

    Style

    Components · Forms

    Textarea

    A multi-line field that grows with its content.

    40% of the 2,073 sites in The UI Index have a form (821 sites).

    Used in UI Pro: Form section

    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/ui/r/textarea.json
    Astro
    npx shadcn@latest add https://www.themes.dev/ui/r/astro/textarea.json

    Or copy the files below into your project. They need clsx, tailwind-merge, and the themes.dev UI 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} />;
}