Command

絞り込み付きのコマンドリスト。⌘K パレットの土台。

入力に応じて候補を絞り込むリストです。SearchableSelect と MultiSelect の中身もこれで、単体では ⌘K パレットに使えます。

export const client = "only";

import {
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
} from "@squadbase/vantage/ui";
import { BarChart3, Table2, Settings } from "lucide-react";

export default function Example() {
  return (
    <Command className="w-96 rounded-lg border">
      <CommandInput placeholder="コマンドを検索…" />
      <CommandList>
        <CommandEmpty>見つかりませんでした。</CommandEmpty>
        <CommandGroup heading="移動">
          <CommandItem>
            <BarChart3 />
            ダッシュボード
            <CommandShortcut>⌘1</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <Table2 />
            売上一覧
            <CommandShortcut>⌘2</CommandShortcut>
          </CommandItem>
        </CommandGroup>
        <CommandGroup heading="設定">
          <CommandItem>
            <Settings />
            表示する列
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}

import {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
} from "@squadbase/vantage/ui";

パーツ

パーツ	役割
`Command`	全体。絞り込みとキーボード操作を持つ
`CommandDialog`	`Dialog` に入れた版。⌘K パレット向け
`CommandInput`	検索入力
`CommandList`	スクロール領域
`CommandEmpty`	0 件のときの表示
`CommandGroup`	`heading` 付きのグループ
`CommandItem`	1 項目。`value` / `onSelect`
`CommandShortcut`	右端のキー表示

絞り込みは既定で項目のテキストに対して行われます。サーバー側で検索したい場合は shouldFilter={false} にして、候補そのものを差し替えてください。