InputGroup

入力欄の前後にアイコン・テキスト・ボタンを添える。

入力欄の内側にアイコンや単位、小さなボタンを配置するための枠です。検索欄や「円」「%」といった単位付きの入力に使います。

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";

パーツ

パーツ	役割
`InputGroup`	枠。フォーカスリングはここに出る
`InputGroupInput` / `InputGroupTextarea`	中身の入力。枠線は持たない
`InputGroupAddon`	添え物の置き場。`align`: `inline-start`（既定）\| `inline-end` \| `block-start` \| `block-end`
`InputGroupText`	単位などの短いテキスト
`InputGroupButton`	小さなボタン。`size`: `xs`（既定）\| `sm` \| `icon-xs` \| `icon-sm`

block-start / block-end は入力欄の上下に置く指定で、InputGroupTextarea と組み合わせるとツールバー付きのテキストエリアになります。