Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Async/Dynamic Search Combobox for Solid

A combobox that waits half a second after you type, then shows three results and a spinner while it waits.

UI library: Ark UI

The popup starts with Start typing to search. After a pause it shows a spinner and Searching..., then three results built from the text, such as your query followed by Result 1. An empty search says No results found.

Use it for users, products, or anything too large to load up front. A short fixed list can filter locally in a Combobox. In Solid, Ark UI does not filter this list. The results are shown as they come back.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Combobox anatomy: control, input, trigger, content, item, item indicator

Usage

<Combobox collection={collection()} onInputValueChange={handleInputValueChange} onValueChange={handleValueChange} positioning={{
    getAnchorElement: () => triggerRef
  }} selectionBehavior="clear" value={value()}>
      <ComboboxTrigger class={cn(buttonVariants({
      variant: "outline"
    }), "w-[250px] justify-between")} ref={triggerRef}>
        {value()[0] ?? "Search dynamically..."}
      </ComboboxTrigger>
      <ComboboxContent>
        <ComboboxInput class="w-full" placeholder="Type to search..." showTrigger={false} />
        {isSearching() ? <div class="flex items-center justify-center gap-2 p-4">
            <Spinner />
            <span class="text-muted-foreground text-sm">Searching...</span>
          </div> : null}
        {isSearching() || search() ? null : <p class="p-4 text-center text-muted-foreground text-sm">
            Start typing to search
          </p>}
        {search() && !isSearching() ? <ComboboxEmpty>No results found.</ComboboxEmpty> : null}
        {isSearching() ? null : <ComboboxList>
            {collection().items.map(result => <ComboboxItem item={result}>
                {result}
              </ComboboxItem>)}
          </ComboboxList>}
      </ComboboxContent>
    </Combobox>

FAQ

How does a search run?

The typed text goes into state, and an effect starts a 500 ms timer whenever it changes. When the timer fires, the results are stored and the spinner goes away. Typing again clears the old timer first, so only the last text is searched.

Why doesn't the combobox filter the results itself?

The server already did. The list shows the results as they come back. The collection is built from the results with createListCollection, without a filter.

Which states can the popup show?

Start typing to search with an empty box, a Spinner and Searching... while waiting, the results when they arrive, and No results found. when a search returns nothing.

How do I call a real API?

Fetch in place of the timer, and ignore responses for a search that's no longer current, for example with an AbortController in the effect's cleanup.

What does the button show?

The picked result, or Search dynamically... before a pick.

Is the input debounced?

Yes, by the timer: a request starts only after typing pauses for 500 ms. Keep a short delay like this so a fast typist doesn't send a request per key.

API Reference

Combobox

Sets collection={collection()}, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning, getAnchorElement and cn. The rest is on the Combobox page.

Spinner

No extra props in this demo. The rest is on the Spinner page.

All 42 combobox examples