Input Group

Connects an input or textarea with leading/trailing addons, icons, text, or buttons into a single bordered cluster.

Install

npx shadcn@latest add https://atomx.acau.net/r/input-group.json

Installing input-group also pulls in Button, Input, and Textarea.

InputGroup is a bordered flex container that visually merges its control (InputGroupInput or InputGroupTextarea) with one or more InputGroupAddons. Addons accept align="inline-start" | "inline-end" | "block-start" | "block-end" to position the addon relative to the control. Use InputGroupButton for clickable trailing actions and InputGroupText for static labels.

<InputGroup>
  <InputGroupAddon>
    <Search />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search..." />
</InputGroup>

Preview

Leading icon

Leading icon + trailing text

@atomx.dev

With trailing button

Textarea variant

Props

Component	Extends	Notes
`InputGroup`	`<div>`	Bordered flex container.
`InputGroupInput`	`Input`	Use instead of bare `Input` inside the group.
`InputGroupTextarea`	`Textarea`	Use instead of bare `Textarea` inside the group.
`InputGroupAddon`	`<div>`	`align` is `"inline-start"` (default), `"inline-end"`, `"block-start"`, or `"block-end"`.
`InputGroupButton`	`Button`	`size` is `"xs"` (default), `"sm"`, `"icon-xs"`, or `"icon-sm"`.
`InputGroupText`	`<span>`	Static text segment inside an addon.