Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Multiple Textareas - Different Sizes Field for React

Short Note is two rows, Comment four, and Essay eight. Placeholders read Brief note, Your comment, and Write your essay.

Three boxes, labels above them. Short Note is two rows, placeholder Brief note... Comment is four rows, placeholder Your comment... Essay is eight rows, placeholder Write your essay...

Save it when the height should suggest how much to write. A single line is an Input. In React, Base UI does not keep the essay.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Field anatomy: root, label, input, description, error

Usage

<FieldGroup className="max-w-md">
  <Field>
    <FieldLabel htmlFor="writing-short-note">Short Note</FieldLabel>
    <Textarea id="writing-short-note" placeholder="Brief note..." rows={2} />
  </Field>
  <Field>
    <FieldLabel htmlFor="writing-comment">Comment</FieldLabel>
    <Textarea id="writing-comment" placeholder="Your comment..." rows={4} />
  </Field>
  <Field>
    <FieldLabel htmlFor="writing-essay">Essay</FieldLabel>
    <Textarea id="writing-essay" placeholder="Write your essay..." rows={8} />
  </Field>
</FieldGroup>

FAQ

How tall is each textarea?

Short Note sets rows to 2, Comment sets rows to 4, and Essay sets rows to 8. Each one is its own Field in a FieldGroup.

What are the placeholders?

They are Brief note..., Your comment..., and Write your essay.... Each placeholder clears once someone types in that box.

How do the labels connect?

FieldLabel names that Textarea. Its htmlFor matches the control's id. The labels are Short Note, Comment, and Essay.

What stacks the three boxes?

FieldGroup stacks them in one column, capped with max-w-md. None of the fields set orientation, so each label stays above its box.

How do I add a hint under one box?

Put FieldDescription after that Textarea. These three fields are only a label and a textarea.

Where is the typed text stored?

None of these textareas keep their text in component state. Each browser field holds what was typed.

API Reference

Field

Sets htmlFor="writing-short-note", htmlFor="writing-comment" and htmlFor="writing-essay". The rest is on the Field page.

Textarea

Sets id="writing-short-note", placeholder="Brief note...", rows={2}, id="writing-comment", placeholder="Your comment..." and rows={4}. The rest is on the Textarea page.

All 38 field examples