Skip to content

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

Free

Textarea with Label Input Group for React

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

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 React, Base UI does not post the comment.

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

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

Usage

<InputGroup className="w-full max-w-sm bg-background">
  <InputGroupTextarea
    className="min-h-[100px]"
    id="input-group-comment"
    placeholder="Share your thoughts..."
  />
  <InputGroupAddon align="block-start" className="border-b">
    <Label className="text-foreground" htmlFor="input-group-comment">
      Comment
    </Label>
  </InputGroupAddon>
  <InputGroupAddon align="block-end">
    <InputGroupButton className="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