Wtk Textarea

Forms

About

A labeled textarea field with size variants, optional resize handles, disabled/read-only states, and an inline error message.

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

Code

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

Usage.tsx

import WtkTextarea from "@/components/ui/wtk-textarea";

export default function WtkTextareaStatesDemo() {
  return (
    <div className="flex flex-col gap-4 w-full max-w-md">
      <div className="flex flex-wrap gap-4">
        <WtkTextarea rows={3} placeholder="Default" />
        <WtkTextarea rows={3} defaultValue="Disabled" disabled />
        <WtkTextarea rows={3} defaultValue="Read only" readOnly />
      </div>
      <WtkTextarea
        label="Description"
        rows={3}
        defaultValue="Too short"
        error="Must be at least 20 characters"
      />
    </div>
  );
}