Textarea

A multi-line text input that automatically grows with content.

$ npx @beaket/ui add textarea
Source
import { Label } from "@/components/ui/label";

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

const args = {
  placeholder: "Type something...",
  disabled: false,
  autoResize: true,
  rows: 4,
};

export default function Example() {
  return <Textarea {...args} />;
}

Examples

Auto Resize

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

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

const args = {};

const render = () => (
  <div className="flex max-w-sm flex-col gap-4">
    <div className="space-y-1.5">
      <Label htmlFor="textarea-auto">Auto Resize (default)</Label>
      <Textarea
        id="textarea-auto"
        placeholder="Type multiple lines and watch it grow..."
        defaultValue={"Line 1\nLine 2\nLine 3"}
      />
    </div>
    <div className="space-y-1.5">
      <Label htmlFor="textarea-resizable">Auto Resize + Manual (resizable)</Label>
      <Textarea
        id="textarea-resizable"
        resizable
        placeholder="Grows with content — drag the handle to make it taller."
        defaultValue={"Line 1\nLine 2"}
      />
    </div>
    <div className="space-y-1.5">
      <Label htmlFor="textarea-fixed">Fixed Height (autoResize=false)</Label>
      <Textarea
        id="textarea-fixed"
        autoResize={false}
        resizable
        rows={4}
        placeholder="Fixed height with manual resize handle"
      />
    </div>
  </div>
);

export default function Example() {
  return render();
}

All States

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

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

const args = {};

const render = () => (
  <div className="flex max-w-sm flex-col gap-4">
    <div className="space-y-1.5">
      <Label htmlFor="textarea-normal">Normal</Label>
      <Textarea id="textarea-normal" placeholder="Normal textarea" />
    </div>
    <div className="space-y-1.5">
      <Label htmlFor="textarea-disabled">Disabled</Label>
      <Textarea id="textarea-disabled" placeholder="Disabled textarea" disabled />
    </div>
    <div className="space-y-1.5">
      <Label htmlFor="textarea-readonly">Read Only</Label>
      <Textarea id="textarea-readonly" value="Read-only content" readOnly />
    </div>
    <div className="space-y-1.5">
      <Label htmlFor="textarea-invalid">Invalid</Label>
      <Textarea id="textarea-invalid" placeholder="Invalid textarea" aria-invalid={true} />
    </div>
  </div>
);

export default function Example() {
  return render();
}

Props

NameTypeDefaultDescription
autoResizeboolean | undefinedtrueAutomatically resize the textarea based on content
resizableboolean | undefinedfalseAllow the user to manually resize the textarea vertically. When combined with `autoResize`, the textarea still grows with content but the user can drag it taller — the manual height becomes a floor that content can only exceed.