Textarea
BaseMulti-line text input with auto-resize support.
Preview
Usage
example.jsx
import { Textarea } from "@/components/ui/textarea";
export default function Example() {
return <Textarea />;
}Source Code
Copy this file into components/ui/textarea.jsx in your project.
textarea.jsx
"use client";
import { forwardRef } from "react";
import { cn } from "@/lib/utils";
const Textarea = forwardRef(({ className, ...props }, ref) => {
return (
<textarea
className={cn(
"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm",
"placeholder:text-muted-foreground",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
"disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
);
});
Textarea.displayName = "Textarea";
export { Textarea };
Quick Install
Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.
npm install clsx tailwind-merge