Skip to main content

Design System

Textarea

Textareas allow users to enter multi-line text input. They're useful for longer form responses and comments.

Basic Usage

Textareas are styled consistently with input fields and support all standard HTML textarea attributes.

Default

States

Textareas support disabled and readonly states for different interaction scenarios.

Enabled

Disabled

Readonly

With Label

Textareas should always be paired with labels for accessibility.

With Label

Message

Usage

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

export function MyForm() {
  return (
    <div className="space-y-2">
      <Label htmlFor="message">Message</Label>
      <Textarea id="message" placeholder="Enter your message..." rows={4} />
    </div>
  );
}

Props

Textarea accepts all standard HTML textarea element props, including rows, cols, placeholder, disabled, readOnly, value, onChange, and more.