# Input Group

> Inputs with icons, text affixes, and buttons.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/input-group.json`

## Install

```tsx
import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupText, InputGroupButton } from "@aspyn-io/kit";
```

### Leading icon

```tsx
<InputGroup>
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search customers…" />
</InputGroup>
```

### Text affixes

Addons align inline-start or inline-end.

```tsx
<InputGroup>
  <InputGroupAddon>
    <InputGroupText>$</InputGroupText>
  </InputGroupAddon>
  <InputGroupInput placeholder="0.00" inputMode="decimal" />
  <InputGroupAddon align="inline-end">
    <InputGroupText>USD</InputGroupText>
  </InputGroupAddon>
</InputGroup>
```

### Trailing button

```tsx
<InputGroup>
  <InputGroupInput placeholder="Coupon code" />
  <InputGroupAddon align="inline-end">
    <InputGroupButton>Apply</InputGroupButton>
  </InputGroupAddon>
</InputGroup>
```

## Notes

- The border and focus ring live on the group, so InputGroupInput/InputGroupTextarea are chrome-less. Clicking an addon focuses the control.
- InputGroupButton defaults to a ghost, extra-small button; pass size (sm, icon-xs, icon-sm) and any Button variant.