Textarea

Forms

About

A multi-line text input field with an optional label, hint and error message, used for longer free-form text like notes or summaries in a form.

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/textarea";

export default function TextareaDemo() {
  return (
    <div
      style={{
        display: "flex",
        gap: "16px",
        alignItems: "flex-start",
        flexWrap: "wrap",
        padding: "24px",
        background: "var(--background)",
      }}
    >
      <Textarea
        label="Role summary"
        placeholder="What will this person own?"
        hint="Markdown is not supported."
        style={{ width: "320px" }}
      />
      <Textarea
        label="Notes"
        error="Keep this under 500 characters."
        defaultValue="Candidate is based in Noida and can start in March."
        style={{ width: "320px" }}
      />
    </div>
  );
}