Textarea

Form

Multi-line text input with native resizing support.

Multi-line inputDisabled

Responsive viewport — resize the window to explore. Direction and density apply only to this preview. Theme applies to the docs too.

textarea.tsx

"use client";

import { Textarea } from "@dashboardpack/core/components/ui/textarea";
import { Label } from "@dashboardpack/core/components/ui/label";

export default function TextareaExample() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="space-y-2">
        <Label htmlFor="project-description">Project description</Label>
        <Textarea
          id="project-description"
          placeholder="What are you building?"
          rows={4}
        />
        <p className="text-xs text-muted-foreground">
          Drag the corner to resize.
        </p>
      </div>
      <Textarea
        aria-label="Read-only notes"
        disabled
        defaultValue="Editing is disabled for this workspace."
      />
    </div>
  );
}

Usage

Use for longer, multi-line content. Set rows to establish the initial height; the component supports native vertical resizing.

Import

import { Textarea } from "@dashboardpack/core/components/ui/textarea";

Available in the included @dashboardpack/core package. Copy the complete example from Source code for all imports and state. Add "use client" when using hooks or event handlers. See installation and theming for project setup.

API reference

Common props and defaults. Slot-specific props are named below; native elements also accept their standard HTML attributes. The component TypeScript definitions are the complete type reference.

Textarea props
Prop	Type / Default	Description
rows	`number` Default: 2 (browser)	Initial visible line count.
value / defaultValue	`string` Default: —	Controlled or initial text.
onChange	`ChangeEventHandler<HTMLTextAreaElement>` Default: —	Handle text changes.
disabled	`boolean` Default: false	Disable editing.

Build with these too

Input Form