Skip to content

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

Free

Textarea with Description Field for Svelte

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

UI library: Ark UI

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 Svelte, Ark UI does not deliver the feedback.

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>Feedback</FieldLabel><Textarea 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. Field connects the two for you, with no ids to write. 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

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

Textarea

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

All 38 field examples