> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Input Group

> Group inputs and addons for compound fields.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/input-group-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=1770600b9d40956c5d2decbc1afac788" alt="Input Group component preview (light)" width="240" data-path="images/ui/input-group-light.png" />
</Frame>

* **Location**: `sabo/src/components/ui/input-group.tsx`

### What it is

* **Wrapper for a control with addons** (prefix/suffix text, icons, or buttons).
* Subcomponents:
  * `InputGroup` (container)
  * `InputGroupAddon` (prefix/suffix area)
  * `InputGroupText` (plain text/icon)
  * `InputGroupButton` (actions)
  * `InputGroupInput` / `InputGroupTextarea` (the control)

### When to use

* URLs, amounts, units, or any control that needs prefix/suffix or inline actions.

### Minimal usage

```tsx sabo/src/components/ui/input-group.tsx theme={null}
import {
  InputGroup,
  InputGroupAddon,
  InputGroupText as InputGroupTextEl,
  InputGroupInput,
} from "@/components/ui/input-group";

export function Example() {
  return (
    <InputGroup>
      <InputGroupAddon>
        <InputGroupTextEl>https://</InputGroupTextEl>
      </InputGroupAddon>
      <InputGroupInput placeholder="your-domain" />
      <InputGroupAddon align="inline-end">
        <InputGroupTextEl>.com</InputGroupTextEl>
      </InputGroupAddon>
    </InputGroup>
  );
}
```