Input Group

Input groups keep several parts of one interaction locked together: prefix, control, and action. Use them when the meaning of the field depends on an adjacent label, inline utility button, or stacked helper rail that should visually read as one unit.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

import { InputGroup, InputGroupInput, InputGroupAddon } from "@/components/ui/input-group"

import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText } from "@/components/ui/input-group"

<InputGroup>
  <InputGroupAddon>
    <InputGroupText>CLI</InputGroupText>
  </InputGroupAddon>
  <InputGroupInput readOnly value="pnpm dlx shadcn@latest add https://swissstyles.dev/r/button.json" />
  <InputGroupAddon align="inline-end">
    <InputGroupButton>Copy</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Why This Primitive Exists

Separate label, input, and button components often drift out of alignment in compact utility rows. The input group creates one bordered interaction so those pieces stay legible and share focus treatment.

• Use it for install commands, search bars, share links, and compact utility inputs.
• Reach for block-aligned addons when a textarea or multi-line note still needs explicit framing.
• Avoid it when the prefix or action is optional enough to live outside the field.

Examples

Install Command Rows

This is the canonical pattern in the docs: a fixed prefix, a read-only field, and a trailing action that all need to read as one control.

<InputGroup>
  <InputGroupAddon>
    <InputGroupText>Install</InputGroupText>
  </InputGroupAddon>
  <InputGroupInput readOnly value="pnpm dlx shadcn@latest add ..." />
  <InputGroupAddon align="inline-end">
    <InputGroupButton>Copy</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Search And Utility Actions

Inline-start and inline-end addons work well for search, filter, and quick-command rows where the control should stay compact.

Textarea Composition

When a grouped control needs more space, switch to InputGroupTextarea and move the addon rails to block positions so the labels and actions still feel attached to the field.

import { InputGroupTextarea } from "@/components/ui/input-group"

<InputGroup className="flex-wrap">
  <InputGroupAddon align="block-start">
    <InputGroupText>Review note</InputGroupText>
  </InputGroupAddon>
  <InputGroupTextarea placeholder="Call out the next revision." />
</InputGroup>

In Context

Input groups become clearer when the surrounding layout explains the task. Pair them with a card or section header so the grouped control handles the mechanics while nearby copy provides intent.

Guidance

Group One Intent, Not Several

• Use an input group when every piece contributes to one action.
• If the trailing button triggers a separate workflow, keep it outside the field instead.
• Keep addon copy short so the input remains the main readable area.

Choose Alignment Deliberately

• Use inline-start and inline-end for single-line controls.
• Use block-start and block-end when the grouped control wraps or uses a textarea.
• Let the outer layout handle width; the group itself should only define the local interaction boundary.

Reuse Existing Surface Patterns

• Use InputGroupButton for trailing actions so button sizing matches the container.
• Prefer read-only inputs for command strings and share URLs to preserve text selection behavior.
• Pair grouped controls with cards, rows, or section headings when users need more context than the field can provide.

API Reference

InputGroup

InputGroup renders a grouped div with role="group" and accepts standard React.ComponentProps<"div">.

Addons And Controls

Variant Props

InputGroupButton composes the shared Button primitive and defaults to variant="quiet" and type="button", so standard button props like disabled, onClick, and alternate variants still work.