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,
  maxWidth,
  children,
}: {
  label: 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}
    </div>
  );
}

export default function TextArea() {
  return (
    <Field label="Incident summary" maxWidth={480}>
      <Textarea
        rows={3}
        placeholder="What happened, what customers saw, what is being done"
      />
    </Field>
  );
}