Command

操作や移動先を検索し、キーボードで素早く選ぶ場合に使います。

プレビュー

都市の検索コマンド

4 都市を絞り込み、選択したローカルの結果、該当なし表示、ショートカット表記を確認します。

保存済み

プレビューを読み込んでいます。

インストール

この Registry を初めて使う場合は、先に基本設定と共通スタイルの導入を完了してください。

npx shadcn@latest add @neumorphism-ui/command

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Registry JSON

使い方

CommandInput と CommandList を構成し、CommandItem をグループ化して CommandEmpty を用意します。onSelect を操作に接続します。キーの表示だけではショートカットは登録されません。

"use client";

import { useState } from "react";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";

export default function Example() {
  const [selection, setSelection] = useState("No command selected.");
  return (
    <div>
      <Command>
        <CommandInput placeholder="Search commands" />
        <CommandList>
          <CommandEmpty>No commands found.</CommandEmpty>
          <CommandGroup heading="Navigation">
            <CommandItem value="projects" onSelect={() => setSelection("Projects selected.")}>Projects</CommandItem>
            <CommandItem value="settings" onSelect={() => setSelection("Settings selected.")}>Settings</CommandItem>
          </CommandGroup>
        </CommandList>
      </Command>
      <p role="status">{selection}</p>
    </div>
  );
}

API リファレンス

cmdk のフィルタリング、アクティブ項目、キーボード操作を維持し、入力を inset、選択項目を押し込まれた表面で表現します。CommandDialog で既存の Dialog と組み合わせられます。

コンポーネント	プロパティ	型	デフォルト	説明
`Command`	`shouldFilter`	`boolean`	`true`	cmdk の組み込み検索フィルタを使用するか指定します。
`Command`	`value / onValueChange`	`string / (value: string) => void`	`—`	現在アクティブな項目を制御します。
`CommandInput`	`value / onValueChange`	`string / (value: string) => void`	`—`	検索文字列を制御するか uncontrolled 入力として使います。
`CommandItem`	`value / onSelect`	`string / (value: string) => void`	`—`	項目の検索値と選択時のコールバックを指定します。
`CommandItem`	`disabled`	`boolean`	`false`	検索結果には残しつつ選択できない状態にします。

プレビュー

都市の検索コマンド

インストール

使い方

API リファレンス

アクセシビリティ