Saasflare UI
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.json
pnpm add @saasflare/ui

Usage

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

On this page