Textarea

Displays a multi-line text input field.

placeholder

disabled

error

rows

#Installation

bunx --bun barefoot add textarea

#Usage

1import { Textarea } from "@/components/ui/textarea"23function TextareaDemo() {4  return (5    <div className="flex flex-col gap-4 max-w-sm">6      <Textarea placeholder="Type your message here." />7      <Textarea disabled placeholder="Disabled textarea" />8      <Textarea error placeholder="Error state" />9      <Textarea rows={6} placeholder="With explicit rows" />10    </div>11  )12}

#Examples

#Disabled

1"use client"23import { Textarea } from '@/components/ui/textarea'45function TextareaDisabled() {6  return (7    <div className="flex flex-col gap-2 max-w-sm">8      <Textarea disabled placeholder="Disabled textarea" />9      <Textarea readOnly value="Read-only content" />10    </div>11  )12}

#Value Binding

0 characters

1"use client"23import { createSignal } from '@barefootjs/dom'4import { Textarea } from '@/components/ui/textarea'56function TextareaBinding() {7  const [value, setValue] = createSignal('')89  return (10    <div className="max-w-sm space-y-2">11      <Textarea12        value={value()}13        onInput={(e) => setValue(e.target.value)}14        placeholder="Type your message here."15      />16      <p className="text-sm text-muted-foreground">17        {value().length} characters18      </p>19    </div>20  )21}

#API Reference

Prop	Type	Default	Description
placeholder	string	-	Placeholder text shown when textarea is empty.
value	string	-	The controlled value of the textarea.
disabled	boolean	false	Whether the textarea is disabled.
readOnly	boolean	false	Whether the textarea is read-only.
error	boolean	false	Whether the textarea is in an error state.
rows	number	-	Number of visible text rows.
onInput	(e: Event) => void	-	Event handler called on each input change.
onChange	(e: Event) => void	-	Event handler called when textarea value changes and loses focus.
onBlur	(e: Event) => void	-	Event handler called when textarea loses focus.
onFocus	(e: Event) => void	-	Event handler called when textarea gains focus.