Get Started
Input
Feedback
Display
Installation
i18n
import { Textarea } from "@/components/ui/textarea"
export function TextareaDemo() {Installation#
pnpm dlx shadcn@latest add https://ui.tyap.me/r/styles/base/textarea.jsonnpx shadcn@latest add https://ui.tyap.me/r/styles/base/textarea.jsonyarn dlx shadcn@latest add https://ui.tyap.me/r/styles/base/textarea.jsonbunx --bun shadcn@latest add https://ui.tyap.me/r/styles/base/textarea.json
Copy and paste the following code into your project.
"use client"
import * as React from "react"
import { useShakeOnInvalid } from "@/hooks/use-shake-on-invalid"
import { cn } from "@/lib/utils"
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
const ref = React.useRef<HTMLTextAreaElement>(null)
useShakeOnInvalid(ref)
return (
<textarea
ref={ref}
data-slot="textarea"
className={cn(
"t-input flex field-sizing-content min-h-16 w-full outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
/>
)
}
export { Textarea }
Update the import paths to match your project setup.
Usage#
import { Textarea } from "@/components/ui/textarea"<Textarea />Examples#
Field#
Use Field, FieldLabel, and FieldDescription to create a textarea with a label and description.
Enter your message below.
import {
Field,
FieldDescription,Disabled#
Use the disabled prop to disable the textarea. To style the disabled state, add the data-disabled attribute to the Field component.
import { Field, FieldLabel } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"
Invalid#
Use the aria-invalid prop to mark the textarea as invalid. To style the invalid state, add the data-invalid attribute to the Field component.
Please enter a valid message.
import {
Field,
FieldDescription,Button#
Pair with Button to create a textarea with a submit button.
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
RTL#
To enable RTL support in shadcn/ui, see the RTL configuration guide.
شاركنا أفكارك حول خدمتنا.
"use client"
import * as React from "react"