Command

インポート

import {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
} from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
} from '@caroainc/ui-components/command'

Composition

Command / CommandDialog
├─ CommandInput?
└─ CommandList
   ├─ CommandEmpty?
   ├─ CommandGroup*
   │  └─ CommandItem*
   │     └─ CommandShortcut?
   └─ CommandSeparator*

検索欄は任意ですが、候補と空状態はCommandList内に置きます。CommandDialogは内部でCommandを生成するため、子にもう一つCommandを重ねず、InputとListを直接渡してください。

基本的な使い方

Commandは単体でもインライン表示できます（cmdkベースの検索付きリスト）。

<Command className="rounded-lg border shadow-md">
  <CommandInput placeholder="検索..." />
  <CommandList>
    <CommandEmpty>結果が見つかりません</CommandEmpty>
    <CommandGroup heading="候補">
      <CommandItem>
        <Icon name="Calendar" size="sm" />
        カレンダー
      </CommandItem>
      <CommandItem>
        <Icon name="Settings" size="sm" />
        設定
      </CommandItem>
      <CommandItem>
        <Icon name="User" size="sm" />
        プロフィール
      </CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="その他">
      <CommandItem>
        <Icon name="HelpCircle" size="sm" />
        ヘルプ
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

コマンドパレット（CommandDialog）

CommandDialogはDialogをベースにしたコマンドパレットです。⌘Kのようなショートカットで開閉するUIによく使われます。ショートカットの表示にはCommandShortcutを使います。

const [open, setOpen] = useState(false)

<Button variant="outline" onClick={() => setOpen(true)}>
  <Icon name="Search" size="sm" />
  コマンドを開く
</Button>
<CommandDialog open={open} onOpenChange={setOpen} title="コマンドパレット" description="コマンドを検索して実行します">
  <CommandInput placeholder="検索..." />
  <CommandList>
    <CommandEmpty>結果が見つかりません</CommandEmpty>
    <CommandGroup heading="候補">
      <CommandItem onSelect={() => setOpen(false)}>
        <Icon name="Calendar" size="sm" />
        カレンダー
      </CommandItem>
      <CommandItem onSelect={() => setOpen(false)}>
        <Icon name="Settings" size="sm" />
        設定
        <CommandShortcut>⌘S</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>

Props

Command

Prop	Type	Default	Description
`className`	`string`	`-`	追加のCSSクラス

cmdkのCommand（Root）のpropsをそのまま受け取ります（loop、filter、shouldFilterなど）。

CommandDialog

Prop	Type	Default	Description
`open`	`boolean`	`-`	開閉状態（制御コンポーネント）
`onOpenChange`	`(open: boolean) => void`	`-`	開閉変更時のコールバック
`title`	`string`	`'Command Palette'`	アクセシビリティ用タイトル（sr-onlyで非表示表示）
`description`	`string`	`'Search for a command to run...'`	アクセシビリティ用説明文（sr-onlyで非表示表示）
`showCloseButton`	`boolean`	`false`	右上の閉じるボタンを表示するか
`className`	`string`	`-`	追加のCSSクラス

CommandInput

Prop	Type	Default	Description
`placeholder`	`string`	`-`	検索入力欄のプレースホルダー
`value`	`string`	`-`	検索文字列（制御コンポーネント）
`onValueChange`	`(value: string) => void`	`-`	検索文字列変更時のコールバック

CommandList

Prop	Type	Default	Description
`className`	`string`	`-`	追加のCSSクラス（最大高さは`max-h-[300px]`で内部スクロール）

CommandEmpty

Prop	Type	Default	Description
`children`	`ReactNode`	`-`	検索結果が0件のときに表示するコンテンツ

CommandGroup

Prop	Type	Default	Description
`heading`	`ReactNode`	`-`	グループの見出し
`className`	`string`	`-`	追加のCSSクラス

CommandItem

Prop	Type	Default	Description
`onSelect`	`(value: string) => void`	`-`	選択された時のコールバック
`value`	`string`	`-`	検索・フィルタ対象になる値（省略時はテキスト内容を使用）
`disabled`	`boolean`	`false`	無効状態

CommandSeparator

Prop	Type	Default	Description
`className`	`string`	`-`	追加のCSSクラス

CommandShortcut

Prop	Type	Default	Description
`children`	`ReactNode`	`-`	ショートカットキー表示（例: ⌘K）
`className`	`string`	`-`	追加のCSSクラス

Command

コマンドパレット

On this page

コマンドパレット