コマンドCommandExperimental

検索入力、候補リスト、ショートカットを組み合わせて、コマンド選択 UI を構成します。

プレビュー

状態とバリエーション

グループとショートカット

候補を用途ごとに分け、頻繁に使う操作にはショートカットを併記します。

検索結果なし

一致する候補がない場合は CommandEmpty で明確に伝えます。

無効な候補

選べない候補は無効表示にし、必要な権限や条件を近くに示します。

プロパティ

Command

表は横にスクロールできます
プロパティ型初期値説明
filter(value: string, search: string) => number-検索結果の一致判定や並びを制御する関数。
valuestring-選択中アイテムの制御値。
onValueChange(value: string) => void-選択値が変わった時に呼ばれるハンドラ。
loopboolean-末尾と先頭でキーボード選択を循環させるか。

CommandInput

表は横にスクロールできます
プロパティ型初期値説明
placeholderstring-検索入力のプレースホルダー。
valuestring-検索入力の制御値。
onValueChange(value: string) => void-検索入力が変わった時に呼ばれるハンドラ。
clearablebooleanfalse入力値がある時にクリアボタンを表示するか。
clearLabelstring"Clear search"クリアボタンの aria-label とツールチップ文言。

CommandItem

表は横にスクロールできます
プロパティ型初期値説明
valuestring-候補の一意な値。未指定時はテキストから推測されます。
onSelect(value: string) => void-候補を選択した時に呼ばれるハンドラ。
keywordsstring[]-表示名とは別に検索へ含めるキーワード。
disabledboolean-候補を選択不可にするか。
disabledReasonReactNode-無効な候補に表示する理由。ホバーやフォーカスでツールチップに表示します。
disabledReasonLabelstring-無効理由ツールチップのフォーカス対象に付ける aria-label。

使い方

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@gunjo/ui"
import { IconCalculator as Calculator, IconCalendar as Calendar, IconCreditCard as CreditCard, IconMoodSmile as Smile, IconSettings as Settings, IconUserCircle as UserRound } from "@tabler/icons-react"

export function CommandExample() {
  return (
    <Command className="w-full max-w-[720px] rounded-lg border shadow-md">
      <CommandInput
        placeholder="コマンドまたは検索語を入力..."
        clearable
        clearLabel="検索をクリア"
      />
      <CommandList>
        <CommandEmpty>一致する結果がありません。</CommandEmpty>
        <CommandGroup heading="候補">
          <CommandItem value="calendar" keywords={["カレンダー", "予定"]}>
            <Calendar className="mr-2 h-4 w-4" />
            <span>カレンダー</span>
          </CommandItem>
          <CommandItem value="emoji" keywords={["絵文字", "顔文字"]}>
            <Smile className="mr-2 h-4 w-4" />
            <span>絵文字を検索</span>
          </CommandItem>
          <CommandItem value="calculator" keywords={["計算機", "電卓"]}>
            <Calculator className="mr-2 h-4 w-4" />
            <span>計算機</span>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="設定">
          <CommandItem value="profile" keywords={["プロフィール", "アカウント"]}>
            <UserRound className="mr-2 h-4 w-4" />
            <span>プロフィール</span>
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem value="billing" keywords={["請求", "支払い"]}>
            <CreditCard className="mr-2 h-4 w-4" />
            <span>請求</span>
            <CommandShortcut>⌘B</CommandShortcut>
          </CommandItem>
          <CommandItem value="settings" keywords={["環境設定", "設定"]}>
            <Settings className="mr-2 h-4 w-4" />
            <span>環境設定</span>
            <CommandShortcut>⌘S</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

使用コンポーネント

CommandCommandInputCommandListCommandItem

関連コンポーネント

ComboboxCommandPalettePopoverDialog