shadcn.io is not affiliated with official shadcn/ui
Combobox examples · With States
Error State with Retry Combobox for React
A combobox whose list failed to load, with a button to retry.
What to show when the options couldn't be fetched. The popup opens on an alert icon, Failed to load, Could not fetch data and a Retry button, and Retry brings in the list. Use it wherever options come from the network, so a failed request doesn't look like an empty list.
Preview
Installation
FAQ
How does the error state start?
The demo keeps an error flag that starts on, so the error block is what you see the first time the list opens.
What does the error block contain?
An AlertCircleIcon at size-8 in text-destructive, Failed to load, Could not fetch data in muted text, and a small outline Button with a RefreshCwIcon that says Retry.
What does Retry do?
It clears the error flag, and the list of Option 1, Option 2 and Option 3 takes the block's place. In an app, run the request again from here and show the error block again if it fails.
What appears after a retry?
The normal list: search filters it, a pick shows on the button, and No results found. covers a search that matches nothing.
Related
- Loading State ComboboxA combobox that shows skeleton rows while
- Empty State with Action ComboboxA combobox that starts with no items and
- Async/Dynamic Search ComboboxA combobox that fetches its options as
- With Validation Feedback ComboboxA required currency combobox that shows
- No Results Variation ComboboxA combobox with an illustrated message
- Read-Only/View Mode ComboboxA read-only combobox that shows its value