Skip to content

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

Free

Block Labels Input Group for Solid

An input and a textarea, each with its visible label in a header row inside the group's frame.

UI library: Ark UI

The label sits inside the frame. Full Name heads a text field. Bio heads a textarea, and only that header has a line under it. Clicking either label focuses its control.

Use it when the label should feel like part of the box. A caption stacked above the control is a Field. In Solid, Ark UI does not move the label into the frame for you.

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

<div class="flex w-full max-w-sm flex-col gap-4">
    <InputGroup class="bg-background">
      <InputGroupInput id="input-group-block-name" placeholder="Enter your name" type="text" />
      <InputGroupAddon align="block-start">
        <Label class="text-foreground" for="input-group-block-name">
          Full Name
        </Label>
      </InputGroupAddon>
    </InputGroup>
    <InputGroup class="bg-background">
      <InputGroupTextarea class="min-h-[100px]" id="input-group-block-bio" placeholder="Tell us about yourself" />
      <InputGroupAddon align="block-start" class="border-b">
        <Label class="text-foreground" for="input-group-block-bio">
          Bio
        </Label>
      </InputGroupAddon>
    </InputGroup>
  </div>

FAQ

How does the label end up above the input?

Its InputGroupAddon has align="block-start", which makes it a full-width row above the control, though it comes after the control in the code.

How is each label tied to its control?

Label sets htmlFor to the control's id, so it names the field and a click on it focuses the field.

Why does only the Bio header have a line?

border-b on that addon draws a divider between the label and the larger textarea. The input's header has none.

Why text-foreground on the labels?

Addon text is muted by default; text-foreground gives the labels full contrast.

Do the ids need to be unique?

Yes, on the whole page. Generate them per instance when a form can appear more than once.

When should I use Field instead?

When the label belongs outside the frame, with a description or an error: a Field around the input group does that.

API Reference

Input Group

Sets id="input-group-block-name", placeholder="Enter your name", type="text", align="block-start", id="input-group-block-bio" and placeholder="Tell us about yourself". The rest is on the Input Group page.

Label

Sets for="input-group-block-name" and for="input-group-block-bio". The rest is on the Label page.

All 39 input group examples