Skip to content

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

Free

Block Labels Input Group for Ark UI

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

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 React, Ark UI does not move the label into the frame for you.

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

<div className="flex w-full max-w-sm flex-col gap-4">
  <InputGroup className="bg-background">
    <InputGroupInput
      id="input-group-block-name"
      placeholder="Enter your name"
      type="text"
    />
    <InputGroupAddon align="block-start">
      <Label className="text-foreground" htmlFor="input-group-block-name">
        Full Name
      </Label>
    </InputGroupAddon>
  </InputGroup>
  <InputGroup className="bg-background">
    <InputGroupTextarea
      className="min-h-[100px]"
      id="input-group-block-bio"
      placeholder="Tell us about yourself"
    />
    <InputGroupAddon align="block-start" className="border-b">
      <Label className="text-foreground" htmlFor="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 htmlFor="input-group-block-name" and htmlFor="input-group-block-bio". The rest is on the Label page.

All 39 input group examples