Textarea that grows with its content up to maxRows, with a character counter that appears near the limit and turns red at it. Works inside a Field. Part of the Layro System: layro.vercel.app.
import * as React from "react";
import { Field, Textarea } from "@/components/ui/layro-textarea";
/* The textarea grows with what you write and stops at maxRows. The
counter only appears near the limit, and turns red at it; there is no
point showing "12/280" to someone who has written twelve characters. */
export default function TextareaDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
<div className="w-full min-w-0 rounded-[18px] [corner-shape:squircle] bg-card p-6 text-card-foreground ring-1 ring-border" style={{ maxWidth: 440 }}>
<h2 className="text-[16px] font-semibold tracking-[-0.01em]">Cancel subscription</h2>
<p className="mt-1 mb-5 text-[13px] text-muted-foreground">Your plan stays active until 14 Oct.</p>
<Field label="Reason for leaving" optional hint="Grows as you type; the counter appears near the limit">
<Textarea
maxLength={180}
placeholder="What would have made you stay?"
defaultValue="We moved the team to another tool after the merger, and nobody set up single sign-on for us before the renewal date."
/>
</Field>
</div>
</div>
);
}