Skip to content

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

Free

Textarea with Detailed Instructions Field for React

Issue Description, instructions to include steps and a review within 24 hours, and a five-row box with numbered steps.

Issue Description is the label. Above the box, the note asks for the issue and steps to reproduce, and says the team reviews within 24 hours. The box is five rows. The placeholder is numbered: 1. I tried to... then 2. Then I...

Use it when the empty box should show the shape of a good answer. A file instead of a write-up is File Upload. Base UI in React does not open a ticket.

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="support-issue-description">
    Issue Description
  </FieldLabel>
  <FieldDescription>
    Describe the issue you're experiencing in detail. Include steps to
    reproduce if applicable. Our team will review within 24 hours.
  </FieldDescription>
  <Textarea
    id="support-issue-description"
    placeholder="1. I tried to...&#10;2. Then I..."
    rows={5}
  />
</Field>

FAQ

Where do the instructions sit?

FieldDescription is between FieldLabel and Textarea. It asks for the issue, steps to reproduce, and says the team reviews within 24 hours.

How tall is the issue box?

rows is 5. The label is Issue Description, and FieldLabel names the textarea. Its htmlFor matches the control's id.

What does the placeholder show?

The placeholder is a numbered sample that starts 1. I tried to... and continues 2. Then I.... A newline entity in the placeholder string splits those steps, and the sample clears once someone types.

Do the instructions stay visible while typing?

Yes. FieldDescription stays above the box. The numbered sample is only the placeholder.

Is this field horizontal?

No. orientation is unset, so the label, the instructions, and the box stack. max-w-md caps the width.

How do I show an error under the instructions?

Keep the instructions in FieldDescription. Set invalid on Field and render the message with FieldError.

API Reference

Field

Sets htmlFor="support-issue-description". The rest is on the Field page.

Textarea

Sets id="support-issue-description", placeholder="1. I tried to...&#10;2. Then I..." and rows={5}. The rest is on the Textarea page.

All 38 field examples