# Input Group

- Page: <https://kznlabs.github.io/labsUI/components/input-group>

## Input Group (`input-group`, component)

Server-safe wrapper that fuses an Input with icons, text (https://, USD) or buttons into one field with a shared border and focus ring. Clicking an addon focuses the input.

- Install: `npx @kznlabs/labsui add input-group`
- Docs: <https://kznlabs.github.io/labsUI/components/input-group>
- Brings: utils
- npm: clsx@^2.1.1, tailwind-merge@^3.7.0

### API

- `<InputGroup>` (+ <div> props): One field made of an Input plus addons (icons, text like "https://", buttons). The group
draws the border and focus ring; the inner Input drops its own (matched by data-slot).
- `<InputGroupAddon>` (+ <div> props): Text, icon or button beside the input. Clicking plain text focuses the input.
  - `align?: "start" | "end"` = `"start"`: Side of the control it sits on.

### Usage

```tsx
<InputGroup><InputGroupAddon>https://</InputGroupAddon><Input aria-label="Site" /><InputGroupAddon align="end">.dev</InputGroupAddon></InputGroup>
```

### Example: site-address.tsx

```tsx
import { InputGroup, InputGroupAddon } from "@/components/ui/input-group";
import { Input } from "@/components/ui/input";

export function SiteAddress() {
  return (
    <InputGroup>
      <InputGroupAddon>https://</InputGroupAddon>
      <Input aria-label="Site address" placeholder="labsui" className="px-0" />
      <InputGroupAddon align="end">.dev</InputGroupAddon>
    </InputGroup>
  );
}
```