Textarea for Radix UI

Q: How do I make a Textarea grow with its content in React?

It already does in browsers that support field-sizing: the Textarea has the field-sizing-content class, so it grows with its text from a minimum height of min-h-16.

Q: How do I set a maximum height on a Textarea?

Add a max height class, for example max-h-40: the Textarea grows up to it and then scrolls. Add resize-none too if people should not drag the corner to resize it.

Q: How do I add a label and help text to a Textarea?

Put it in a Field with a FieldLabel above it and a FieldDescription under it, as the Field demo does, so screen readers read the label with the Textarea. Give the Textarea an id and point the FieldLabel at it with htmlFor.

Q: How do I show a validation error on a Textarea?

Set aria-invalid on it, or mark its Field invalid, as the Invalid demo does: the border and focus ring turn destructive. Show the message with a FieldError under it so it is announced.

Q: How do I limit and count characters in a Textarea?

Set maxLength to stop typing past the limit. Keep the value in state and show its length next to the limit, for example "120 / 280", in the FieldDescription.

Q: Does the Textarea work with form libraries in React?

Yes: it renders a native textarea, so it submits with a name and any form library can bind it. The Forms guides show a Textarea field for React Hook Form, TanStack Form and Formisch, with validation errors.

Room for a comment, message or note that won't fit on one line. For React with Radix UI, it grows as people type and scrolls once you cap the height.

Multi-line text for a comment, a bio, or a support note. It starts at a few lines.

Use it when the answer needs more than one line. A name, an email, or a search that must stay one line is an Input. In React, Radix UI renders a native textarea, so the value submits with the form.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Anatomy

Usage

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

const TextareaDemo = () => (
  <Textarea className="max-w-xs" placeholder="Type your message here." />
);

Demos

Field

A placeholder disappears the moment someone types, so it cannot be the name of the field. Put the textarea in a Field with a label of Message and a description between the label and the box, where it stays visible and gets announced. Anything a person fills in more than once should look like this, not like a bare box.

PreviewCode

Disabled

Set disabled on both the textarea and the Field around it, so typing stops, the cursor changes, and the label picks up the disabled styling too. Use it when the message depends on an earlier choice, or the viewer is not allowed to edit. A dim border that still accepts focus feels broken, because the prop is what actually blocks input.

PreviewCode

Invalid

After a bad submit, set invalid on the Field and aria-invalid on the textarea so the border and focus ring go destructive. The line underneath is the reason, and it should be the real one from your check, not a generic failure. FieldError is the better slot when that sentence should exist only while the field is invalid, while a description stays on screen the whole time.

PreviewCode

Button

A note with Send under it is the smallest message form: the textarea is the only field, and the button sits outside the box. Use the stack when sending that text is the whole action. When the button should live in the corner of the field, an input group is the composition, not a gap under the box.

PreviewCode

Rtl

Comments in Arabic, with dir set to rtl on the field, so the label, the caret, and the helper share a start edge. rows is 4 so there is room for a sentence rather than the short default. Set direction here or on the document, and skip physical padding that pins the text to the left.

PreviewCode

FAQ

How do I make a Textarea grow with its content in React?

It already does in browsers that support field-sizing: the Textarea has the field-sizing-content class, so it grows with its text from a minimum height of min-h-16.

How do I set a maximum height on a Textarea?

Add a max height class, for example max-h-40: the Textarea grows up to it and then scrolls. Add resize-none too if people should not drag the corner to resize it.

How do I add a label and help text to a Textarea?

Put it in a Field with a FieldLabel above it and a FieldDescription under it, as the Field demo does, so screen readers read the label with the Textarea. Give the Textarea an id and point the FieldLabel at it with htmlFor.

How do I show a validation error on a Textarea?

Set aria-invalid on it, or mark its Field invalid, as the Invalid demo does: the border and focus ring turn destructive. Show the message with a FieldError under it so it is announced.

How do I limit and count characters in a Textarea?

Set maxLength to stop typing past the limit. Keep the value in state and show its length next to the limit, for example "120 / 280", in the FieldDescription.

Does the Textarea work with form libraries in React?

Yes: it renders a native textarea, so it submits with a name and any form library can bind it. The Forms guides show a Textarea field for React Hook Form, TanStack Form and Formisch, with validation errors.