Textarea

Forms 2

About

An auto-growing multi-line text input with a character counter that fades in near the limit and shakes if the user types past it.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Textarea to your project and fits it to your theme.

Code

How Textarea is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import Textarea from "@/components/ui/textarea";

export default function TextareaDemo() {
  const [note, setNote] = React.useState("");
  return (
    <div className="grid w-full max-w-[440px] gap-20">
      <Textarea
        aria-label="Note"
        placeholder="Write a note…"
        value={note}
        onChange={(e) => setNote(e.target.value)}
        maxLength={120}
      />
      <Textarea
        aria-label="Invalid note"
        invalid
        defaultValue="This needs a date."
        minRows={2}
      />
      <Textarea
        aria-label="Disabled note"
        disabled
        defaultValue="Read only for now."
        minRows={2}
      />
    </div>
  );
}