Forms & selection@neumorphism-ui/combobox

Combobox

Searchable selection with filtering, empty results, and keyboard interaction. Provide ComboboxLabel and an empty-result message. Check arrows, Enter, Escape, and real IME input.

@neumorphism-ui/combobox

Registry JSON

Preview

Search cities

Installation

npx shadcn@latest add @neumorphism-ui/combobox

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

"use client";

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

Example

export default function Example() {
  const cities = ["Busan", "London", "Seoul", "Tokyo"];
  return (<div className="w-full max-w-sm"><Combobox items={cities}><ComboboxLabel>{"Search cities"}</ComboboxLabel><ComboboxInput placeholder={"Search cities"} /><ComboboxContent><ComboboxEmpty>{"No matching cities."}</ComboboxEmpty><ComboboxList>{(city: string) => <ComboboxItem key={city} value={city}>{city}</ComboboxItem>}</ComboboxList></ComboboxContent></Combobox></div>);
}

API Reference

Component	Prop	Type	Default	Description
`Combobox`	`items`	`unknown[]`	`—`	Source items available for filtering and selection.
`Combobox`	`value / onValueChange`	`Combobox.Root.Props`	`—`	Set controlled or initial state.
`Combobox`	`multiple`	`boolean`	`—`	Allow multiple selected items.