InputGroup

Attach icons, text or buttons to either end of an input.

A frame that places icons, units or small buttons inside the field — search boxes, or inputs with a % or currency suffix.

export const client = "only";

import {
  InputGroup,
  InputGroupInput,
  InputGroupAddon,
  InputGroupText,
  InputGroupButton,
} from "@squadbase/vantage/ui";
import { Search, X } from "lucide-react";

export default function Example() {
  return (
    <div className="flex w-80 flex-col gap-3">
      <InputGroup>
        <InputGroupAddon>
          <Search />
        </InputGroupAddon>
        <InputGroupInput placeholder="顧客名で絞り込む" />
        <InputGroupAddon align="inline-end">
          <InputGroupButton aria-label="消去">
            <X />
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>

      <InputGroup>
        <InputGroupInput type="number" defaultValue={12} />
        <InputGroupAddon align="inline-end">
          <InputGroupText>%</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

import {
  InputGroup,
  InputGroupInput,
  InputGroupTextarea,
  InputGroupAddon,
  InputGroupText,
  InputGroupButton,
} from "@squadbase/vantage/ui";

Parts

Part	Role
`InputGroup`	The frame; the focus ring lives here
`InputGroupInput` / `InputGroupTextarea`	The field itself, borderless
`InputGroupAddon`	Where attachments go. `align`: `inline-start` (default) \| `inline-end` \| `block-start` \| `block-end`
`InputGroupText`	Short text such as a unit
`InputGroupButton`	A small button. `size`: `xs` (default) \| `sm` \| `icon-xs` \| `icon-sm`

block-start / block-end place the addon above or below the field — pair either with InputGroupTextarea for a textarea with its own toolbar.