Question 1

What is a textarea component?

Accepted Answer

A multi-line text field for comments, descriptions and messages: a styled native textarea that grows with its content. It's shadcn.io's Textarea component, built on Base UI, React Aria, Ark UI and Radix UI for React, and on Ark UI for Vue, Svelte and Solid, and styled with Tailwind CSS. Each example is one small file.

Question 2

Are these textarea examples free?

Accepted Answer

Yes. Every textarea example is free to use in personal and commercial projects, with no attribution required. Seeing the code and installing an example takes a free shadcn.io account.

Question 3

When should I use a textarea instead of an input?

Accepted Answer

When the answer can run past one line: comments, bios, descriptions, messages. Use an Input for short single values such as names, emails and URLs.

Question 4

Does the textarea grow as people type?

Accepted Answer

Yes. It uses field-sizing-content, so it grows with its content from a minimum height. Set rows with field-sizing-fixed for a fixed height that scrolls, as the short textarea example does.

Question 5

How do I add a label and a description?

Accepted Answer

Put the Textarea in a Field with a FieldLabel and a FieldDescription. On Ark UI, Vue, Svelte and Solid the Field connects them for you; on Base UI, React Aria and Radix UI, point FieldLabel's htmlFor at the textarea's id.

Question 6

How do I show a character count?

Accepted Answer

Keep the value in state, render its length against the limit in a FieldDescription, and set maxLength on the textarea so the browser enforces it.

Question 7

How do I show an error?

Accepted Answer

Set invalid on the Field and put the message in FieldError. The textarea gets aria-invalid and the destructive border.

Question 8

How do I install a textarea example?

Accepted Answer

Sign in with a free account, then copy the code or run the install command on the example's page. It adds the example and Textarea, plus Field or Label when the example uses them, if you don't have them yet.

Question 9

How do I connect a textarea to a form library?

Accepted Answer

Bind the library's value and change handler to the Textarea like any text input, and set invalid on the Field from the library's error. The form guides for React Hook Form, TanStack Form and Formisch show the wiring.

Question 10

How do I send on Enter in a chat box?

Accepted Answer

Handle the key down on the textarea: on Enter without Shift, prevent the newline and send. Keep Shift+Enter as a new line, and show the shortcut so people find it.

Question 11

What do the textarea examples depend on?

Accepted Answer

The Textarea component and Tailwind CSS. Labeled and form examples add Field or Label. Only the character count keeps state.

Question 12

Are textarea examples accessible?

Accepted Answer

The control is a native textarea, so typing, selection, spellcheck and screen readers work as usual. Labels are tied to the textarea, invalid fields set aria-invalid, and required ones set required.

Question 13

Can I use these examples with React Server Components?

Accepted Answer

The static examples render as Server Components. The character count example keeps state, so it's a client component. On Vue, Svelte and Solid they're regular components.

Question 14

Which Tailwind CSS version do these examples need?

Accepted Answer

Tailwind CSS v4, the version shadcn.io's components use. The auto-growing height relies on field-sizing.

Textarea Examples

Required Textarea

Textarea with Character Count

Textarea with Error

Textarea with Helper Text

Textarea with Hint

Textarea with Description

Textarea with Floating Label

Textarea with Inline Label

Textarea with Label

Disabled Textarea

Read-only Textarea

Short Textarea

More component examples

Field

Form

Input

Input Group

Input OTP

Label

Toggle

Toggle Group

Textarea examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every textarea example. One prompt away.