Textarea

Room for more than a line. It grows with what people write, up to the height you allow.

Shown on the project overview.62/280
Fig. 1 A description field with a character count. Keep typing and it grows; past its limit, the text scrolls.

When to use it

Use Textarea for descriptions, comments, and notes, anything people might write a few sentences in. It starts 64px tall, so it looks like room to write.

Cap its growth with a max height when it sits in a dense layout, so a long note can’t push the rest of the page away.

Input

One line.

Profile

The name shown in your workspace.

Used for account notifications.

Names, emails, and other short answers.

TextareaThis page

Several lines.

Shown on the project overview.62/280

Descriptions, comments, and notes.

Input Group

A field with extras.

⌘K
https://

Search, prefixes, units, and inline actions.

Fig. 2 Three ways to collect text. Pick by how much people will write and what sits beside it.

How it behaves

Renders a native textarea and forwards every textarea prop. Label it and connect hints or errors using aria-describedby.

It grows with its content using field-sizing: content, starting at 64px, and has no resize handle. Add a max-h class to cap the growth; past it, the text scrolls. Browsers without field-sizing keep the minimum height and scroll.

Matches Input: a filled control surface, a faint edge on hover, and a 2px focus ring. Set aria-invalid for invalid values; validation belongs to your form.

Build it

Add it with the shadcn CLI:

Terminal

A complete example. Change the values to fit your product:

textarea-example.tsx

The full source is yours to edit once installed:

textarea.tsx