Textarea

Textarea collects multiline text while preserving native resizing, validation, selection, and form behavior. Its technical frame expands with the content and remains legible in light and dark themes.

Use it for notes, descriptions, messages, and other values that may span several lines. Use Input when the expected value should remain on one line.

Installation

pnpm dlx shadcn@latest add http://ui.argv-tech.dev/r/textarea.json

Usage

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

<label htmlFor="notes">Deployment notes</label>
<Textarea
    id="notes"
    name="notes"
    placeholder="Describe this deployment"
/>

Sizing

Textarea forwards native textarea props. Use name, required, minLength, maxLength, rows, and autoComplete exactly as you would on a native control.

The control grows with its content where field-sizing is supported and remains vertically resizable by default. Override resize through className only when the surrounding layout provides another reliable way to inspect all content.

Set disabled when the value is unavailable and should not be submitted. Use readOnly when the value should remain selectable and participate in form submission.

API Reference

Textarea

Textarea accepts all native textarea props.

Accessibility

Connect every textarea to a visible label through matching htmlFor and id values. A placeholder is an example or hint, not a replacement for the label.

Set aria-invalid="true" after validation fails and connect the error with aria-describedby. The message should explain what needs to change rather than repeating that the field is invalid.