Docs
Textarea
Textarea
Displays a form textarea or a component that looks like a textarea.
Installation
Copy and paste the following code into your project.
import * as React from "react"
import { cn } from "@/lib/utils"
export interface TextareaProps
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
({ className, ...props }, ref) => {
return (
<textarea
className={cn(
"ring-offset-background flex min-h-[80px] w-full rounded-md border border-input bg-background-200 px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
)
}
)
Textarea.displayName = "Textarea"
export { Textarea }
Update the import paths to match your project setup.
Usage
import { Textarea } from "@/components/ui/textarea"
<Textarea />
Examples
Default
Disabled
With Label
With Text
Your message will be copied to the support team.