Input Group

An Input with left and/or right addon slots for icons, labels, or buttons. Addons share border treatment with the input so they visually merge into a single field.

✓Left and right addon positions
✓Works with any Input props
✓Addons share border treatment with the input
✓Supports text, icon, or button addons

import { Input Group }from "@aetherstack/ui"

input group.tsx

import { InputGroup, InputGroupAddon, InputGroupText } from "@/components/ui/input-group"
import { Input } from "@/components/ui/input"
import { Search } from "lucide-react"

export function InputGroupDemo() {
  return (
    <div className="flex flex-col gap-3 w-full max-w-sm">
      <InputGroup>
        <InputGroupAddon position="left">
          <InputGroupText>$</InputGroupText>
        </InputGroupAddon>
        <Input placeholder="0.00" className="rounded-l-none" />
      </InputGroup>

      <InputGroup>
        <InputGroupAddon position="left">
          <Search className="h-4 w-4" />
        </InputGroupAddon>
        <Input placeholder="Search…" className="rounded-l-none" />
      </InputGroup>
    </div>
  )
}

Usage

Left text addon

Add a text prefix like a currency symbol.

Right addon

Place the addon on the right side.

USD

Both sides

Combine left and right addons on the same input.

USD

Props

Prop	Type	Default	Description

InputGroup

Prop	Type	Default	Description
className	string	—	Additional Tailwind classes on the flex wrapper.
...props	React.HTMLAttributes<HTMLDivElement>	—	All standard HTML div attributes.

InputGroupAddon

Prop	Type	Default	Description
position	"left" \| "right"	"left"	Which side of the input the addon attaches to.
className	string	—	Additional Tailwind classes on the addon wrapper.

InputGroupText

Prop	Type	Default	Description
className	string	—	Additional Tailwind classes on the inner text span.

* Required props

Accessibility

→InputGroup is a layout container only — it has no implicit ARIA semantics.
→The inner Input still receives focus normally; addons are presentational.
→If the addon communicates meaningful context (e.g. currency), add aria-describedby on the Input pointing to a visually-hidden description.