Textarea

Source code

A multi-line text field.

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

export default function TextareaDemo() {
  return <Textarea placeholder="Write a message" className="w-64" />;
}

Sizes

Three sizes to fit different layouts.

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

const sizes = ["sm", "md", "lg"] as const;

export default function TextareaSizesDemo() {
  return (
    <div className="flex w-64 flex-col gap-3">
      {sizes.map((size) => (
        <Textarea key={size} size={size} rows={2} placeholder={`Size ${size}`} />
      ))}
    </div>
  );
}

Disabled

Prevent interaction with the field.

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

export default function TextareaDisabledDemo() {
  return <Textarea disabled defaultValue="Can't edit this" className="w-64" />;
}

Invalid

Shows an error state when the value is invalid.

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

export default function TextareaInvalidDemo() {
  return <Textarea data-invalid defaultValue="Too short" className="w-64" />;
}

API

PropTypeDefault
size"sm" | "md" | "lg""md"

Plus the native textarea attributes, like rows, value, and placeholder.