shadcn.io is not affiliated with official shadcn/ui
Combobox examples · Custom Actions
With Quick Filters Combobox for React
A combobox with filter buttons above the list that narrow it to one category.
An issue picker with All, Bugs, Features and Docs buttons between the search box and the list. A button narrows the list to its category and the search works within it. Use it for long lists with a few clear categories, where a filter is quicker than typing.
Preview
Installation
FAQ
How are the filter buttons built?
Small pill Buttons in a row with border-b p-2. The active one uses the default variant and the rest are outline, and each sets aria-pressed.
How does a button set the filter?
It stores its category, read from a data-category attribute, in state. All stores an empty category, which shows everything.
How do the filter and the search combine?
The items are narrowed to the category first, then the search filters what's left.
The narrowed list is passed as items, and the combobox filters it by the search.
Which issues are listed?
Bug Report and Critical Bug (Bugs), Feature Request and New Feature (Features), and Documentation (Docs). No item found. shows when nothing matches.
Related
- Recent Selections Section ComboboxA combobox with a Recent section of files
- Multiple Groups with Labels ComboboxA combobox with Frontend and Backend
- Create New Option Inline ComboboxA combobox that offers to create the
- Badge with Text (Standard)A default badge with a short label for a
- Simple Single Select ComboboxA single-select combobox that opens from
- Multiple Items with Badges ComboboxA multi-select combobox that shows each