Neumorphism UI
表单与选择@neumorphism-ui/combobox

Combobox

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

@neumorphism-ui/combobox
Registry JSON

预览

搜索城市

安装

安装: comboboxnpx shadcn@latest add @neumorphism-ui/combobox

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置 。

用法

Import

Combobox import 代码
"use client";

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

Example

Combobox 用法代码
export default function Example() {
  const cities = ["Busan", "London", "Seoul", "Tokyo"];
  return (<div className="w-full max-w-sm"><Combobox items={cities}><ComboboxLabel>{"搜索城市"}</ComboboxLabel><ComboboxInput placeholder={"搜索城市"} /><ComboboxContent><ComboboxEmpty>{"没有匹配的城市。"}</ComboboxEmpty><ComboboxList>{(city: string) => <ComboboxItem key={city} value={city}>{city}</ComboboxItem>}</ComboboxList></ComboboxContent></Combobox></div>);
}

API 参考

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

无障碍

  • 01

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

  • 02

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