Textarea

Auto-resizable textarea with matching input design language.

Message

Code

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

export default function Example() {
  return <Textarea placeholder="Write something..." />
}

Installation

$npx particleui-cli add textarea

Usage

TSX

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

export default function Example() {
  return <Textarea placeholder="Write something..." />
}

Examples

With rows

Control height with the rows prop.

TSX

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

export default function Example() {
  return (
    <div className="space-y-3 max-w-sm">
      <Textarea rows={2} placeholder="2 rows" />
      <Textarea rows={5} placeholder="5 rows (default)" />
      <Textarea rows={8} placeholder="8 rows" />
    </div>
  )
}

Disabled state

TSX

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

export default function Example() {
  return <Textarea disabled placeholder="Disabled textarea" />
}

Props

Prop	Type	Default	Required
placeholder	string	—	no
disabled	boolean	`false`	no
rows	number	—	no

Details

Source filecomponents/ui/textarea.tsx

Typeui

Categoriesforms, core

npm dependencies

Registry deps

Claude skill—