Textarea

Multi-line text field that grows with its content and shows focus and invalid states.

Installation

pnpm dlx shadcn@latest add @ward/textarea

Add the Ward registry to components.json once:

"registries": {
  "@ward": "https://ward.so/r/{name}.json"
}

Or install from the URL with no configuration: npx shadcn@latest add https://ward.so/r/textarea.json

Usage

import { Textarea } from "@/components/ui/textarea";
<Textarea placeholder="What should we know about this site?" />
<Textarea aria-invalid disabled defaultValue="Read only" />

Props

PropTypeDefaultDescription
placeholderstring-Hint shown while the field is empty.
classNamestring-Extra classes. The field grows with its content from a 4rem minimum, so add min-h-32 for a taller one.
valuestring-Current value, when the parent controls the field; pair it with onChange.
aria-invalidbooleanfalseMarks the field as invalid and draws the destructive border.
disabledbooleanfalseDim the field and stop it taking focus or input.

Ward · Version 1.0.0 · Registry manifest