Components
Textarea
Multi-line text field with intent states and auto-sizing support for comments and messages.
Installation
npx shadcn@latest add https://ui.saasflare.io/r/textarea.jsonpnpm add @saasflare/uiUsage
Loading…
"use client"import { Textarea } from "@saasflare/ui"/** A multi-line text input for longer free-form content. */export function Demo() { return ( <div className="w-full max-w-sm"> <Textarea placeholder="What changed in this release?" rows={4} /> </div> )}States
Loading…
"use client"import { Label, Textarea } from "@saasflare/ui"/** Disabled and invalid textarea states. */export function Demo() { return ( <div className="flex flex-col gap-4 w-full max-w-sm"> <div className="flex flex-col gap-2"> <Label htmlFor="notes-disabled">Internal notes (disabled)</Label> <Textarea id="notes-disabled" defaultValue="Locked while the deploy is in progress." disabled rows={3} /> </div> <div className="flex flex-col gap-2"> <Label htmlFor="bio-invalid">Bio (invalid)</Label> <Textarea id="bio-invalid" defaultValue="" aria-invalid rows={3} /> </div> </div> )}With Label
Loading…
"use client"import { Label, Textarea } from "@saasflare/ui"/** A labelled textarea for a project description field. */export function Demo() { return ( <div className="flex flex-col gap-2 w-full max-w-sm"> <Label htmlFor="description">Project description</Label> <Textarea id="description" placeholder="Describe what your team is building…" rows={4} /> </div> )}API Reference
Prop
Type