Textarea

A multi-line text input for longer form content. Uses field-sizing: content for automatic height adjustment and responsive minimum heights across breakpoints.

Anatomy

A single <Textarea> component wrapping a native textarea element with data-slot="textarea". Minimum heights scale responsively: min-h-14 on mobile, sm:min-h-16, lg:min-h-20.

Examples

Default

With label

Disabled

Invalid

Valid

Design Guidelines

Do

  • Use for multi-line content. Descriptions, comments, messages, and notes are ideal use cases.
  • Pair with a label and character count. Users need to know the purpose and any length constraints.
  • Let the auto-sizing work. The field-sizing: content property grows the textarea with content.

Don't

  • Don't use for single-line input. Use Input for names, emails, or short values.
  • Don't set fixed heights. Let the responsive min-height and auto-sizing handle the dimensions.
  • Don't forget maxLength. Set a reasonable limit and show remaining characters.

Developer Reference

Accessibility

  • Focus ring uses focus-visible for keyboard navigation.
  • aria-invalid triggers the destructive ring style.
  • data-valid triggers the success border and ring style.
  • Uses field-sizing: content for native auto-grow behavior.
  • Responsive min heights: min-h-14 (base), sm:min-h-16, lg:min-h-20.

Usage

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

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

// With label
<Label htmlFor="bio">Bio</Label>
<Textarea id="bio" placeholder="Tell us about yourself..." />

// Disabled
<Textarea placeholder="Disabled" disabled />

// With max length
<Textarea maxLength={500} placeholder="Up to 500 characters..." />

// Valid state
<Textarea data-valid placeholder="Looks good!" />