Textarea

Installation

npx bearnie add textarea

import Textarea from "@/components/ui/textarea/Textarea.astro";
import Label from "@/components/ui/label/Label.astro";

Usage

import { Textarea } from "@/components/ui/textarea"

<Textarea placeholder="Type here..." />

Examples

With label

Your message

<div class="grid gap-2 w-full max-w-sm">
<Label for="message">Your message</Label>
<Textarea id="message" placeholder="Type your message here." />
</div>

Disabled

With button

<div class="grid gap-2 w-full max-w-sm">
<Textarea placeholder="Type your message here." />
<Button>Send message</Button>
</div>

Anatomy

Textarea - A single multi-line input element

Props

Prop	Type	Default	Description
placeholder	string	-	Placeholder text
disabled	boolean	false	Disables the textarea
required	boolean	false	Makes the field required
invalid	boolean	false	Shows error state
name	string	-	Form field name
id	string	-	Element ID
rows	number	4	Number of visible rows
value	string	-	Textarea value
class	string	-	Additional CSS classes