Combobox Filter

Searchable dropdown for very long option lists like brands. Type to narrow options, select one or many, and see result counts inline.

Brand

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { FilterCombobox } from "@/components/beste/component/filter-combobox";

<FilterCombobox
  label="Brand"
  placeholder="All brands"
  searchPlaceholder="Search brands"
  multiple                       // omit for single-select
  onChange={(value) => console.log("selected:", value)}
  options={[
    { label: "Acme Supply", value: "acme", count: 18 },
    { label: "Northwind", value: "northwind", count: 12 },
  ]}
/>

More Filter components

View all Filter

Category

Select Filter

filter-select

Single-select dropdown for long option lists that would crowd a sidebar. Supports a clear item, result counts, and a disabled state for dependent filters.

Size

Multiselect Filter

filter-multiselect

Dropdown with checkbox rows and a selection-count badge. Keeps many-option filters compact in toolbars where a checkbox list would not fit.

Category

24
18
9
12

Checkbox Filter

filter-checkbox

Multi-select checkbox list with optional result counts. Works controlled or uncontrolled, designed for filter sidebars and toolbars.

Size

Chips Filter

filter-chips

Multi-select button chips for compact option sets like sizes. Works controlled or uncontrolled.

Price

$25$180

Range Slider Filter

filter-slider

Two-thumb range slider with live numeric readouts and a commit callback, built for price ranges.

Gender

Segmented Filter

filter-segmented

Single-select segmented control built on Tabs for mutually exclusive choices like gender or condition. Clicking the active segment clears the selection.