shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Custom Actions
Async/Dynamic Search Combobox for React
A combobox that fetches its options as you type, with a spinner while it searches.
A search-as-you-type combobox. The list starts with Start typing to search, shows a spinner and Searching... while a request runs, then lists what came back. Here a half-second timer stands in for the request and returns three results built from your text. Use it for users, products or anything too large to load up front.
Preview
Installation
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.
filter is null, so the combobox shows items as they are.
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.
Related
- Create New Option Inline ComboboxA combobox that offers to create the
- Simple Single Select ComboboxA single-select combobox that opens from
- Recent Selections Section ComboboxA combobox with a Recent section of files
- With Quick Filters ComboboxA combobox with filter buttons above the
- Standard DialogA share dialog with a read-only link, a
- Simple Command DialogA button that opens a command dialog with