shadcn.io is not affiliated with official shadcn/ui
Combobox examples · With States
Loading State Combobox for React
A combobox that shows skeleton rows while its options load.
A combobox that loads its options when it opens. For two seconds the popup shows four skeleton rows, then the real options appear. Use it when the list comes from a request, so the popup holds its shape instead of flashing empty.
Preview
Installation
FAQ
When do the skeletons show?
Every time the list opens. The demo watches the open state, turns loading on, and turns it off after a two-second timer that stands in for a request.
The open state comes from onOpenChange, which receives a boolean.
What do the placeholders look like?
Four Skeleton bars, h-8 w-full, in a column with gap-2 and p-2, about the height of the rows they stand in for. The column has aria-busy.
What appears when loading finishes?
Option 1, Option 2 and Option 3. Search filters them, and No results found. covers a search that matches nothing.
Does it load again on every open?
Yes, the timer starts each time the list opens, and closing the list cancels it. Keep the loaded items and skip the request on later opens if they don't change often.
How do I load real data?
Start the request where the timer starts, store the result and pass it to the list. Show the error state if it fails.
Related
- Error State with Retry ComboboxA combobox whose list failed to load
- Async/Dynamic Search ComboboxA combobox that fetches its options as
- Empty State with Action ComboboxA combobox that starts with no items and
- Simple Single Select ComboboxA single-select combobox that opens from
- With Validation Feedback ComboboxA required currency combobox that shows
- No Results Variation ComboboxA combobox with an illustrated message