Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/shadcn-ui/ui/llms.txt

Use this file to discover all available pages before exploring further.

​
Installation

npx shadcn@latest add textarea

​
Usage

import { Textarea } from "@/components/ui/textarea"

<Textarea placeholder="Type your message here." />

​
Examples

​
Basic

A simple textarea with a placeholder. 
import { Textarea } from "@/components/ui/textarea"

export default function TextareaDemo() {
  return <Textarea placeholder="Type your message here." />
}

​
With Button

Combine textarea with a button for form submissions. 
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"

export default function TextareaWithButton() {
  return (
    <div className="grid w-full gap-2">
      <Textarea placeholder="Type your message here." />
      <Button>Send message</Button>
    </div>
  )
}

​
Disabled

Use the disabled prop to disable user interaction. 
import { Textarea } from "@/components/ui/textarea"

export default function TextareaDisabled() {
  return <Textarea placeholder="Type your message here." disabled />
}

​
Form Integration

    ​
    Component Code

    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 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
        className
      )}
      {...props}
    />
  )
}

export { Textarea }

    ​
    Props

    The Textarea component accepts all standard HTML textarea attributes:
    PropTypeDescription
    classNamestringAdditional CSS classes to apply
    placeholderstringPlaceholder text
    disabledbooleanDisables the textarea
    valuestringControlled value
    onChange(e: React.ChangeEvent<HTMLTextAreaElement>) => voidChange handler
    rowsnumberNumber of visible text lines
    maxLengthnumberMaximum number of characters
    aria-invalidbooleanMarks textarea as invalid for validation

    ​
    Features

    • Auto-resizing with field-sizing-content
    • Focus ring with smooth transitions
    • Dark mode support
    • Accessible with ARIA attributes
    • Invalid state styling
    • Disabled state styling