Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input Group examples · Custom

Textarea with Label Input Group for React

A comment textarea with its label in a header row and a Post Comment button under it.

Framework
UI library

A comment box whose label lives inside the frame: a block-start addon with a bottom border holds the Comment label, the textarea follows, and a block-end addon holds the Post Comment button. The label points at the textarea with htmlFor and id, so clicking it focuses the field.

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

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.

All 39 input group examples