ShadcnStore

Appearance

Shadcn Textarea ​

The shadcn/ui Textarea captures multi-line text, styled with Tailwind CSS v4. It renders a native <textarea>, so it accepts every native attribute and pairs with a Label and the Form component. Textareas power message, comment, and description fields across ShadcnStore blocks.

Key features ​

  • Native <textarea>, so every attribute works out of the box.
  • Pairs with Label and the Form component.
  • Disabled, read-only, and error (aria-invalid) states.
  • Tailwind-styled and dark-mode ready.
  • No primitive dependency — a styled native element.

Installation ​

bash
npx shadcn@latest add textarea

Usage ​

tsx
import { Textarea } from "@/components/ui/textarea"

export function Example() {
  return <Textarea placeholder="Type your message here." />
}

With a label ​

tsx
import { Label } from "@/components/ui/label"

<div className="grid gap-2">
  <Label htmlFor="message">Your message</Label>
  <Textarea id="message" />
</div>

Disabled and invalid states ​

Use disabled to make the field inactive, and aria-invalid to mark a validation error (it drives the destructive ring styles).

tsx
<Textarea disabled placeholder="Disabled" />
<Textarea aria-invalid="true" placeholder="Has an error" />

With a button ​

Pair the Textarea with a Label and a submit Button for a compact feedback or comment form.

tsx
<div className="grid gap-2">
  <Label htmlFor="feedback">Your feedback</Label>
  <Textarea id="feedback" placeholder="Tell us what you think." />
  <Button className="justify-self-end">Send message</Button>
</div>

Props ​

The Textarea forwards all native <textarea> attributes, including rows, placeholder, value, defaultValue, onChange, disabled, readOnly, required, and aria-invalid.

Accessibility ​

  • Give the textarea an accessible name with a connected Label or aria-label.
  • For errors, set aria-invalid and point aria-describedby at the message.
  • Set a sensible rows so the initial size hints at the expected length.

When to use the Textarea ​

Use a Textarea for free-form, multi-line text: a contact message, a product review, a bio, or notes. For single-line values use an Input. For a fixed set of choices use a Select or Radio Group.

Used in these blocks ​

A Textarea pairs with a Label, lives inside a Form beside Input fields, and submits with a Button.

FAQ ​

What is the shadcn textarea used for? ​

The Textarea captures multi-line text such as messages, comments, bios, and descriptions. It renders a native <textarea> element.

What is the difference between Textarea and Input? ​

Textarea is for multi-line text and can grow in height. Input is a single-line field.

How do I auto-resize the textarea? ​

The base component is fixed height; add a small effect to set the height from scrollHeight on input, or use a resize utility.

How do I limit the number of characters? ​

Add the native maxLength attribute, and optionally show a live count next to the field.

Copyright © 2025-2026 ShadcnStore