Textarea

contactfrom shadcn/ui Essentials

Textarea

AI Usage Rules

Use Textarea for multi-line text input. Pair with a label. The field-sizing-content class auto-sizes to content.

Code Template

import * as React from "react"
import { cn } from "@/lib/utils"

function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
  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 transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        className
      )}
      {...props}
    />
  )
}

export { Textarea }

Props Schema

Property	Type	Default	Description
rows	number	—
placeholder	string	—

View raw JSON schema

{
  "type": "object",
  "properties": {
    "rows": {
      "type": "number"
    },
    "placeholder": {
      "type": "string"
    }
  }
}