Textarea
Multi-line field that grows with its content via field-sizing-content, no manual rows tuning needed. Use for messages, notes, and longer form answers.
Live preview
open in new tab ↗import * as React from "react"
import { cn } from "@/lib/utils"
function Textarea({ className, ...props }) {
return (
<textarea
data-slot="textarea"
className={cn(
"flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-50 md:text-sm",
className
)}
{...props}
/>
)
}
export { Textarea }Block id: shadcn-textareareact-tailwind · drop-in
More input blocks
Want the whole site, not just the block?
We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.