Textarea

Forms

About

A multi-line text field that can auto-grow with its content up to a row limit, show a live character count against a maxLength, and automatically wires up to a surrounding FormField's label, id and invalid state.

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

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

function Field({
  label,
  hint,
  maxWidth,
  children,
}: {
  label: string;
  hint?: string;
  maxWidth?: number;
  children: React.ReactNode;
}) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 4, maxWidth }}>
      <label
        style={{ fontSize: "0.8125rem", fontWeight: 500, color: "#171717" }}
      >
        {label}
      </label>
      {children}
      {hint && (
        <p style={{ margin: 0, fontSize: "0.6875rem", color: "#8b8b8b" }}>
          {hint}
        </p>
      )}
    </div>
  );
}

export default function GrowWithTheText() {
  return (
    <Field
      label="Responder notes"
      hint="Grows to at most eight lines."
      maxWidth={520}
    >
      <Textarea
        autoGrow
        maxRows={8}
        defaultValue={
          "09:41 Alert fired.\n09:44 Priya Raman acknowledged.\n09:52 Rolled back release 4.18.\n09:58 Customers see a banner on the status page.\n10:04 Error rate crosses back under 1 %.\n10:08 Release 4.18 fully rolled back.\n10:12 Incident downgraded to SEV3."
        }
      />
    </Field>
  );
}