Input Group

Add icons, text, buttons, and other chrome around an input or textarea while sharing one focus ring. Height matches Input (h-8). Place addons after the control in the DOM and use align for visual position.

Icon

Place icons in InputGroupAddon. Default align is inline-start.

Installation

CLI

npx @sonojs/ui@latest add input-group

Also needsnpx @sonojs/ui@latest add button input textarea

Composition

structure

InputGroup
├── InputGroupInput / InputGroupTextarea
├── InputGroupAddon (align: inline-start | inline-end | block-start | block-end)
│   ├── InputGroupText
│   └── InputGroupButton
└── …

Usage

input-group.tsx

import { SearchIcon } from "lucide-react"

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

export function Example() {
  return (
    <InputGroup>
      <InputGroupInput placeholder="Search…" />
      <InputGroupAddon>
        <SearchIcon />
      </InputGroupAddon>
    </InputGroup>
  )
}

Props

Prop	Type	Default	Description
align	"inline-start" · "inline-end" · "block-start" · "block-end"	"inline-start"	On `InputGroupAddon` — visual side relative to the control.
size	"xs" · "sm" · "icon-xs" · "icon-sm"	"xs"	On `InputGroupButton` — compact sizes for the group.
variant	Button variant	"ghost"	On `InputGroupButton` — same variants as `Button`.
className	string	—	Merge extra Tailwind classes on any part.