Skip to content

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

Free

Textarea with Label Input Group for Vue

A comment box with the Comment label in the header and a Post Comment button in the footer.

UI library: Ark UI

The label lives inside the frame. Comment sits in a header with a line under it, then the textarea, then Post Comment in the footer. Clicking Comment focuses the field. The placeholder says Share your thoughts...

Use it for a comment composer that should read as one box. A label outside the frame is a Field. In Vue, Ark UI does not post the comment.

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

Input Group anatomy: root, addon, input, text, button

Usage

<InputGroup class="w-full max-w-sm bg-background">
  <InputGroupTextarea
    class="min-h-[100px]"
    id="input-group-comment"
    placeholder="Share your thoughts..."
  />
  <InputGroupAddon align="block-start" class="border-b">
    <Label class="text-foreground" htmlFor="input-group-comment">Comment</Label>
  </InputGroupAddon>
  <InputGroupAddon align="block-end">
    <InputGroupButton class="ms-auto" size="sm" variant="default">
      Post Comment
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

FAQ

How does the label sit inside the box?

It's in an InputGroupAddon with align="block-start" and border-b, written after the textarea. Block start puts the addon above it as a header row.

How is the label tied to the textarea?

Label has htmlFor set to the textarea's id. Outside a Field, that pair is what names the control and makes the label clickable.

Why does the label use text-foreground?

Addons use the muted text color; text-foreground keeps the label at full contrast, as a label should be.

Why are both addons after the textarea in the code?

Input groups put the control first and the addons after it, and align decides where each addon shows. Screen readers and the Tab key then reach the textarea before the button.

Do I need a unique id?

Yes. The id must be unique on the page, so use one per instance, for example from your form library or a generated id.

API Reference

Input Group

Sets id="input-group-comment", placeholder="Share your thoughts...", align="block-start", align="block-end", size="sm" and variant="default". The rest is on the Input Group page.

Label

Sets htmlFor="input-group-comment". The rest is on the Label page.

All 39 input group examples