コマンドCommandExperimental
検索入力、候補リスト、ショートカットを組み合わせて、コマンド選択 UI を構成します。
プレビュー
状態とバリエーション
グループとショートカット
候補を用途ごとに分け、頻繁に使う操作にはショートカットを併記します。
一致する結果がありません。
カレンダー
絵文字を検索
計算機
プロフィール⌘P
請求⌘B
環境設定⌘S
検索結果なし
一致する候補がない場合は CommandEmpty で明確に伝えます。
一致する結果がありません。
カレンダー
絵文字を検索
計算機
無効な候補
選べない候補は無効表示にし、必要な権限や条件を近くに示します。
ワークスペースを検索⌘F
管理設定権限が必要
プロパティ
Command
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| filter | (value: string, search: string) => number | - | 検索結果の一致判定や並びを制御する関数。 |
| value | string | - | 選択中アイテムの制御値。 |
| onValueChange | (value: string) => void | - | 選択値が変わった時に呼ばれるハンドラ。 |
| loop | boolean | - | 末尾と先頭でキーボード選択を循環させるか。 |
CommandInput
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| placeholder | string | - | 検索入力のプレースホルダー。 |
| value | string | - | 検索入力の制御値。 |
| onValueChange | (value: string) => void | - | 検索入力が変わった時に呼ばれるハンドラ。 |
| clearable | boolean | false | 入力値がある時にクリアボタンを表示するか。 |
| clearLabel | string | "Clear search" | クリアボタンの aria-label とツールチップ文言。 |
CommandItem
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| value | string | - | 候補の一意な値。未指定時はテキストから推測されます。 |
| onSelect | (value: string) => void | - | 候補を選択した時に呼ばれるハンドラ。 |
| keywords | string[] | - | 表示名とは別に検索へ含めるキーワード。 |
| disabled | boolean | - | 候補を選択不可にするか。 |
| disabledReason | ReactNode | - | 無効な候補に表示する理由。ホバーやフォーカスでツールチップに表示します。 |
| disabledReasonLabel | string | - | 無効理由ツールチップのフォーカス対象に付ける aria-label。 |
使い方
Loading...