Input Group

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

sabo/src/components/ui/input-group.tsx

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>
  );
}

​What it is

​When to use

​Minimal usage

What it is

When to use

Minimal usage