Neumorphism UI

Combobox

Use Combobox when people need to search a list before choosing a value.

Preview

Search for a city

Filter a short city list by typing and display an empty message when nothing matches.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/combobox

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Provide items, a ComboboxLabel, and ComboboxInput. Compose content with an empty state and a list that renders a uniquely identified ComboboxItem for each result.

"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 Reference

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

ComponentPropTypeDefaultDescription
Comboboxitemsunknown[]—Source items available for filtering and selection.
Comboboxvalue / onValueChangeCombobox.Root.Props—Set controlled or initial state.
Comboboxmultipleboolean—Allow multiple selected items.

Accessibility

  • 01

    Provide ComboboxLabel and an empty-result message. Check arrows, Enter, Escape, and real IME input.

  • 02

    Preserve labels and visible focus when customizing render or className.