About
A labelled multi-line textarea field that autosizes to its content and shows a maxlength counter ring that fills and warns as the limit is approached.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Forza Textarea to your project and fits it to your theme.
Code
How Forza Textarea is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import * as React from "react";
import FzTextarea from "@/components/ui/fz-textarea";
export default function FzTextareaDemo() {
const [notes, setNotes] = React.useState("");
return (
<div className="fz-theme flex min-h-[320px] w-full items-center justify-center p-10">
<div className="w-full max-w-sm">
<FzTextarea
value={notes}
onChange={setNotes}
label="Build notes"
maxlength={140}
/>
</div>
</div>
);
}
More by chrisdalbano
View all
Forza Button
2
Fz Accordion
2
Forza Table
Fz Tabs