Command

A filterable command list — the base for a ⌘K palette.

A list that narrows as you type. It is what powers SearchableSelect and MultiSelect, and on its own it makes a ⌘K palette.

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

Parts

Part	Role
`Command`	The root; owns filtering and keyboard handling
`CommandDialog`	The same thing inside a `Dialog` — for a ⌘K palette
`CommandInput`	The search field
`CommandList`	The scroll region
`CommandEmpty`	Shown when nothing matches
`CommandGroup`	A group with a `heading`
`CommandItem`	One item; `value` / `onSelect`
`CommandShortcut`	The key hint on the right

Filtering runs against the items’ text by default. To search on the server, set shouldFilter={false} and replace the items yourself.