Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

With Quick Filters Combobox for React

An issue combobox with All, Bugs, Features, and Docs buttons that narrow the list before search.

All, Bugs, Features, and Docs sit between the search box and the list. A button keeps only that category, and the search runs inside what remains. The issues include Bug Report and Feature Request.

Use it for a long list with a few clear categories, where a filter is quicker than typing the category. Group headings are the other split, on a Combobox. In React, Base UI searches the list it is given. The buttons change that list.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Combobox anatomy: control, input, trigger, content, item, item indicator

Usage

<Combobox items={items}>
  <ComboboxTrigger
    render={
      <Button className="w-[250px] justify-between" variant="outline" />
    }
  >
    <ComboboxValue placeholder="Select item..." />
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput placeholder="Search items..." showTrigger={false} />
    <div className="flex gap-1 border-b p-2">
      {filters.map((option) => (
        <Button
          aria-pressed={category === option.value}
          data-category={option.value}
          key={option.label}
          onClick={handleFilter}
          pill
          size="xs"
          variant={category === option.value ? "default" : "outline"}
        >
          {option.label}
        </Button>
      ))}
    </div>
    <ComboboxEmpty>No item found.</ComboboxEmpty>
    <ComboboxList>
      {(issue: Issue) => (
        <ComboboxItem key={issue.value} value={issue}>
          {issue.label}
        </ComboboxItem>
{/* The rest of the file is under 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.

Does the filter reset when the list closes?

No, it's kept in state, so the next open shows the same category. Reset it when the list closes if that's confusing.

What does the button show?

The picked issue, or Select item... before a pick.

API Reference

Combobox

Sets items={items}, placeholder="Select item...", placeholder="Search items...", showTrigger={false} and value={issue}. The rest is on the Combobox page.

Button

Sets variant="outline", aria-pressed={category === option.value}, data-category={option.value}, onClick={handleFilter}, pill and size="xs". The rest is on the Button page.

All 42 combobox examples