Textarea

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/textarea.json

npx shadcn@latest add https://prototyper-ui.com/r/textarea.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/textarea.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/textarea.json

This will add the following files to your project:

components/ui/textarea.tsx

Usage

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

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

Styling

Data Slots

Use data-slot attributes to target the textarea in CSS:

Slot name	Element
`textarea`	The `<textarea>` root

Customization Examples

/* Make all textareas taller */
[data-slot="textarea"] {
  @apply min-h-32 text-lg;
}

{/* Override styles via className */}
<Textarea className="rounded-xl px-5" placeholder="Custom textarea" />

API Reference

A styled multi-line text input.

Prop

Type

All native textarea props are forwarded via ...props.

Accessibility

Keyboard Interactions

Key	Action
`Tab`	Moves focus into or out of the textarea

ARIA Attributes

Renders as a native <textarea> element.
aria-invalid styling is applied when the textarea has validation errors.
Pair with a <label> or aria-label to ensure the textarea is accessible to screen readers.

Stream UI

This component is available in @prototyperai/stream-ui.

Catalog Definition

textarea.catalog.ts

import { z } from "zod"
import { defineComponent } from "@prototyperai/stream-ui/catalog"

export default defineComponent({
  description: "A multi-line text area for longer form input",
  props: z.object({
    label: z.string().optional().describe("Label displayed above the textarea"),
    placeholder: z.string().optional().describe("Placeholder text"),
    value: z.string().optional().describe("Controlled textarea value"),
    rows: z.number().optional().describe("Number of visible text rows"),
    disabled: z.boolean().optional().describe("Whether the textarea is disabled"),
  }),
  events: ["change", "blur", "focus"],
  example: { label: "Message", placeholder: "Type your message...", rows: 3 },
})

Example Spec

{
  "root": "messageArea",
  "elements": {
    "messageArea": {
      "type": "Textarea",
      "props": {
        "label": "Message",
        "placeholder": "Type your message...",
        "rows": 3
      },
      "$bindState": { "path": "/message", "event": "change" }
    }
  }
}

Learn more in the Stream UI documentation.

Related Components

Input Groupused by

A composable input group with addons, buttons, and text built on Base UI.

Textarea

Related Components

On this page