shadcn.io is not affiliated with official shadcn/ui
Combobox examples · With States
Empty State with Action Combobox for React
A combobox that starts with no items and offers a button to create the first ones.
An empty list that tells people what to do next. Before anything exists, the popup shows an inbox icon, No items yet, a line of help and a Create Item button. Pressing it adds three items, and from then on the combobox works as usual. Use it for first-run screens, where a bare "No results" would read like an error.
Preview
Installation
FAQ
When does the empty block show?
While the list has no items at all. The demo keeps a flag for that and renders the block in place of the list, so it isn't confused with a search that matched nothing.
What is inside that block?
An InboxIcon at size-12, No items yet in font-medium, Get started by creating your first item in text-muted-foreground, and a small full-width Button with a PlusIcon that says Create Item.
What does Create Item add?
New Item 1, New Item 2 and New Item 3. They're stored in state and passed to the list. In an app, open a create form here or call your API, then add what comes back.
What happens after the items exist?
The list takes the block's place. Search filters it, a pick shows on the button, and No results found. covers a search that matches nothing.
Related
- No Results Variation ComboboxA combobox with an illustrated message
- Error State with Retry ComboboxA combobox whose list failed to load
- Create New Option Inline ComboboxA combobox that offers to create the
- Loading State ComboboxA combobox that shows skeleton rows while
- Simple Single Select ComboboxA single-select combobox that opens from
- Read-Only/View Mode ComboboxA read-only combobox that shows its value