Baby Baltazar

Textarea

Displays a form textarea or a component that looks like a textarea.

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/textarea.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

Default

With Label

Max 500 characters.

States

Usage

How to use this component in your code.

{/* Default */}
<Textarea placeholder="Type your message here." />

{/* With Label + Helper Text */}
<Label htmlFor="bio">Bio</Label>
<Textarea id="bio" placeholder="Tell us about yourself..." />
<p className="text-xs text-foreground/50">Max 500 characters.</p>

{/* States */}
<Textarea disabled placeholder="Disabled" />
<Textarea aria-invalid="true" defaultValue="Error" />