Skip to main content
Input Group component preview (light)
  • 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>
  );
}