Neumorphism UI

Combobox

用于先搜索候选列表，再选择值的场景。

预览

搜索与选择城市

输入文字以筛选城市，没有匹配结果时显示提示。

正在加载预览。

安装

首次使用此 Registry？请先完成 基础配置与共享样式安装 。

npx shadcn@latest add @neumorphism-ui/combobox

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

提供 items、ComboboxLabel 和 ComboboxInput。组合空结果提示与 ComboboxList，将每个结果渲染成唯一的 ComboboxItem。

"use client";

import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList } from "@/components/ui/combobox";

const cities = ["London", "Seoul", "Tokyo"];

export default function Example() {
  return (
    <Combobox items={cities}>
      <ComboboxLabel>City</ComboboxLabel>
      <ComboboxInput placeholder="Search cities" />
      <ComboboxContent>
        <ComboboxEmpty>No matching cities.</ComboboxEmpty>
        <ComboboxList>{(city: string) => <ComboboxItem key={city} value={city}>{city}</ComboboxItem>}</ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
}

API 参考

支持过滤、空结果及键盘选择的搜索输入。 提供 ComboboxLabel 和空结果提示。检查方向键、Enter、Escape 及真实 IME 输入。

组件属性类型默认值说明
Comboboxitemsunknown[]—用于过滤与选择的原始选项。
Comboboxvalue / onValueChangeCombobox.Root.Props—设置受控状态或初始状态。
Comboboxmultipleboolean—允许多项选择。

无障碍

  • 01

    提供 ComboboxLabel 和空结果提示。检查方向键、Enter、Escape 及真实 IME 输入。

  • 02

    修改 render 或 className 时保留标签关联和可见焦点。