Skip to content

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

Free

Textarea with Detailed Instructions Field for Vue

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

UI library: Ark UI

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. Ark UI in Vue does not open a ticket.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<Field class="max-w-md">
    <FieldLabel>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 placeholder="1. I tried to...
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. Field connects the two for you, with no ids to write.

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

No extra props in this demo. The rest is on the Field page.

Textarea

Sets placeholder="1. I tried to... 2. Then I..." and rows="5". The rest is on the Textarea page.

All 38 field examples