Textarea

Displays a multiline text input field for longer form content.

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

Installation

pnpm dlx cubix@latest add textarea --base radix

Usage

Import

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

Example

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

Examples

With label and helper text

Message

Your message will be copied to the support thread.

<div className="grid w-full max-w-sm gap-2">
  <label htmlFor="message" className="text-sm font-medium">Message</label>
  <Textarea id="message" placeholder="Type your message here." />
  <p className="text-sm text-muted-foreground">Your message will be copied to the support thread.</p>
</div>

Custom height

<Textarea className="min-h-32" placeholder="Notes" />

Invalid state

Set aria-invalid to switch to destructive border and ring styles � no extra prop needed:

<Textarea placeholder="Bio" aria-invalid />

Disabled

<Textarea disabled placeholder="Disabled" />

In a form

<form className="grid w-full max-w-sm gap-3">
  <Textarea placeholder="Tell us what you need help with." />
  <Button type="submit">Send message</Button>
</form>

API Reference

Note: The textarea renders data-slot="textarea" for targeting in tests and parent selectors, and switches to destructive styles automatically when aria-invalid is set.

Props

Prop	Type	Default	Description
aria-invalid	boolean	-	Marks the textarea as invalid and applies destructive border/ring styles automatically.
disabled	boolean	false	Disables the textarea and prevents interaction.
placeholder	string	-	Hint text shown when the textarea is empty (styled with muted-foreground).
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
...props	React.ComponentProps<'textarea'>	-	All native textarea attributes (value, onChange, required, rows, maxLength, ...) are forwarded to the rendered element.