A multi-line field for comments, messages, and any note that needs a little more room.
tsx
import { Textarea } from "@/components/ui/textarea"export function Example() { return <Textarea placeholder="Type your message here." />}Installation
npx @arctis-sh/@arctis-sh/ui@latest add textareaUsage
import { Textarea } from "@/components/ui/textarea"<Textarea />With label
Add a label and short helper text when the field needs more context.
What should we know?
tsx
import { Textarea } from "@/components/ui/textarea"export function Example() { return ( <div className="grid gap-2"> <label htmlFor="message" className="text-sm font-medium tracking-wide" > Message </label> <p className="text-sm text-muted-foreground"> What should we know? </p> <Textarea id="message" placeholder="Type your message here." /> </div> )}Disabled
Set disabled when the field is unavailable for input.
tsx
import { Textarea } from "@/components/ui/textarea"export function Example() { return ( <div className="grid gap-2 opacity-60"> <label htmlFor="message-disabled" className="text-sm font-medium tracking-wide" > Message </label> <Textarea id="message-disabled" placeholder="Type your message here." disabled /> </div> )}Invalid
Mark the control with aria-invalid when validation fails.
Add a bit more detail.
tsx
import { Textarea } from "@/components/ui/textarea"export function Example() { return ( <div className="grid gap-2"> <label htmlFor="message-invalid" className="text-sm font-medium tracking-wide text-destructive" > Message </label> <Textarea id="message-invalid" placeholder="Type your message here." aria-invalid defaultValue="Hmm" /> <p className="text-sm text-destructive"> Add a bit more detail. </p> </div> )}Button
Place a small default button below the field and align it to the end.
tsx
import { Button } from "@/components/ui/button"import { Textarea } from "@/components/ui/textarea"export function Example() { return ( <div className="grid gap-2"> <Textarea placeholder="Type your message here." /> <div className="flex justify-end"> <Button type="button" size="sm"> Send message </Button> </div> </div> )}API Reference
Textarea
| Prop | Type | Default |
|---|---|---|
| placeholder | string | — |
| disabled | boolean | false |
| aria-invalid | boolean | — |
| rows | number | — |
| className | string | — |
Also accepts the other native textarea attributes (id, name, value, defaultValue, onChange, and so on).
<Textarea placeholder="Write a short note…" />