Skip to content

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

Free

Multiple Textareas - Different Sizes Field for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not keep the essay.

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

<FieldGroup class="max-w-md">
  <Field>
    <FieldLabel>Short Note</FieldLabel>
    <Textarea placeholder="Brief note..." :rows="2" />
  </Field>
  <Field>
    <FieldLabel>Comment</FieldLabel>
    <Textarea placeholder="Your comment..." :rows="4" />
  </Field>
  <Field>
    <FieldLabel>Essay</FieldLabel>
    <Textarea 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. Field connects the two for you, with no ids to write. 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

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

Textarea

Sets placeholder="Brief note...", rows="2", placeholder="Your comment...", rows="4", placeholder="Write your essay..." and rows="8". The rest is on the Textarea page.

All 38 field examples