Textarea.

When a single line isn't enough. The Textarea component handles multi-line input with auto-growing capabilities, validation states, and accessible resizing controls.

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

Configuration

Context

State

Validation

Product Feedback

Found a bug? Let us know how we can improve.

Default Resize Behavior

Resize Hygiene

We enforce `resize-y` by default. Allowing horizontal resizing often breaks grid layouts and mobile responsiveness. The component also has a sensible `min-height` to prevent it from collapsing into an unusable slit.

Focus State Consistency

The focus ring is identical to the Input component, using `ring-offset` and theme variables. This ensures that a form containing both Inputs and Textareas feels like a cohesive document, not a patchwork of elements.

ContactForm.tsx

<div className="grid w-full gap-1.5">
  <Label htmlFor="message">Your Message</Label>
  <Textarea 
    placeholder="Type your message here." 
    id="message"
    className="min-h-[120px]"
  />
  <p className="text-sm text-muted-foreground">
    Your message will be copied to the support team.
  </p>
</div>