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 WtkTextareaResizableDemo() {
  return (
    <div className="flex flex-wrap gap-4 w-full max-w-2xl">
      <WtkTextarea label="Not resizable" rows={3} placeholder="resize: none" />
      <WtkTextarea
        label="Vertical"
        resizable="vertical"
        rows={3}
        placeholder="Drag the bottom edge"
      />
      <WtkTextarea
        label="Horizontal"
        resizable="horizontal"
        rows={3}
        placeholder="Drag the side"
      />
      <WtkTextarea
        label="Bidirectional"
        resizable="bidirectional"
        rows={3}
        placeholder="Drag the corner"
      />
    </div>
  );
}