Skip to main content
Textarea component preview (light)
  • Location: sabo/src/components/ui/textarea.tsx

​
When to use

  • Freeform, multi-line responses (messages, descriptions).
  • Use Input for single-line text.

​
Usage

sabo/src/components/ui/textarea.tsx
import { Textarea } from "@/components/ui/textarea";

export function Example() {
  return (
    <Textarea placeholder="Write your message…" className="w-80 h-24" />
  );
}

​
Key props

​
rows
number
Sets the initial height. Combine with className height utilities.
​
className
string
Width/height and overrides (w-80 h-24, rounded-lg).

​
Styling tip

  • Textareas grow with content by default (field-sizing-content); set a fixed height if needed.

​
Accessibility

  • Provide a descriptive label. Use aria-invalid and error text when validation fails.