Skip to content

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

Free

Textarea with Description Field for React

Feedback is a four-row box saying Your feedback helps us improve, with Share your thoughts about our service underneath.

Feedback sits above a four-row box. The placeholder is Your feedback helps us improve... Under the box: Share your thoughts about our service. That line stays while someone types.

This order suits a note people can read after they start. A one-line reply is an Input. In React, Base UI does not deliver the feedback.

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

<Field className="max-w-md">
  <FieldLabel htmlFor="service-feedback">Feedback</FieldLabel>
  <Textarea
    id="service-feedback"
    placeholder="Your feedback helps us improve..."
    rows={4}
  />
  <FieldDescription>Share your thoughts about our service.</FieldDescription>
</Field>

FAQ

Where does the helper text sit?

The order is FieldLabel, Textarea, then FieldDescription. The description reads Share your thoughts about our service.

How tall is the feedback box?

rows is 4. The placeholder is Your feedback helps us improve..., and it clears once someone types.

How does the Feedback label connect?

FieldLabel names the Textarea. Its htmlFor matches the control's id. The label text is Feedback.

Does the description stay while someone types?

Yes. FieldDescription stays under the box. The placeholder is the only text that clears on input.

Is this field a row?

No. orientation is unset, so the label stays above the textarea. max-w-md caps the width.

How do I move the sentence above the box?

Place FieldDescription between FieldLabel and Textarea. Use that order when the sentence is a rule people need before they type.

API Reference

Field

Sets htmlFor="service-feedback". The rest is on the Field page.

Textarea

Sets id="service-feedback", placeholder="Your feedback helps us improve..." and rows={4}. The rest is on the Textarea page.

All 38 field examples