Textarea

Forms

About

A multi-line text field with a focus ring, error state, disabled state, optional auto-growing height, and a live character counter for forms that collect longer text like notes or descriptions.

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 { Textarea } from "@/components/ui/textarea";
import { useState } from "react";

export default function TextareaStatesDemo() {
  const [v, setV] = useState(
    "Collect the documents for the appointment:\n- employer confirmation\n- six months of payslips",
  );

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-10 text-foreground">
      <div className="flex w-full flex-wrap items-start gap-6">
        <div style={{ flex: "1 1 280px", maxWidth: 340 }}>
          <Textarea
            label="Default (rows=4)"
            value={v}
            onChange={setV}
            rows={4}
            hint="Short and to the point"
          />
        </div>
        <div style={{ flex: "1 1 280px", maxWidth: 340 }}>
          <Textarea
            label="Error"
            value="too short"
            error="Give more detail (at least 20 characters)"
            rows={4}
          />
        </div>
        <div style={{ flex: "1 1 280px", maxWidth: 340 }}>
          <Textarea
            label="Disabled"
            value="Cannot be edited"
            disabled
            rows={4}
          />
        </div>
      </div>
    </div>
  );
}