Command

用于搜索命令或目标，并通过键盘快速选择。

预览

可搜索的城市命令

筛选四个城市并选择本地结果，查看空结果提示与快捷键文字。

已保存

正在加载预览。

安装

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 的筛选、活动项和键盘导航，并将输入区呈现为内嵌表面、活动项呈现为按下状态。CommandDialog 可与现有 Dialog 组合。

组件	属性	类型	默认值	说明
`Command`	`shouldFilter`	`boolean`	`true`	决定是否使用 cmdk 内置搜索筛选。
`Command`	`value / onValueChange`	`string / (value: string) => void`	`—`	控制当前活动项。
`CommandInput`	`value / onValueChange`	`string / (value: string) => void`	`—`	控制搜索词，或作为非受控输入使用。
`CommandItem`	`value / onSelect`	`string / (value: string) => void`	`—`	指定项目的搜索值和选择回调。
`CommandItem`	`disabled`	`boolean`	`false`	让项目保留在结果模型中但不可选择。

预览

可搜索的城市命令

安装

用法

API 参考

无障碍