Text Area
A multi-line text field that grows with its content.
@cupertinoui/textareaRegistry JSON "use client"
import { Textarea } from "@/components/ui/textarea"
export default function TextareaDemo() {
return <Textarea className="max-w-sm" placeholder="Add a comment" />
}Installation
pnpm dlx shadcn@latest add @cupertinoui/textareaThe first install also adds the macOS theme. See Installation to set up the registry.
Usage
import { Textarea } from "@/components/ui/textarea"
<Textarea placeholder="Add a comment" />Examples
With a label
"use client"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
export default function TextareaWithLabel() {
return (
<div className="flex w-full max-w-sm flex-col gap-2">
<Label htmlFor="notes">Notes</Label>
<Textarea id="notes" defaultValue="Remember to back up the project before the update." />
<p className="text-mac-subheadline text-mac-label-secondary">
Notes are shown in the Get Info window.
</p>
</div>
)
}API Reference
Every part forwards the props of the underlying element. The props below are the ones CupertinoUI adds or changes.
Textarea
A styled native textarea that grows with its content.
| Prop | Type | Description |
|---|---|---|
className | string | Extra classes, merged with the component's own. |