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.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { FilterSelect } from "@/components/beste/component/filter-select";
<FilterSelect
label="Category"
placeholder="All categories"
clearLabel="All categories" // first item that clears the selection
onChange={(value) => console.log("selected:", value)} // null when cleared
options={[
{ label: "Sneakers", value: "sneakers", count: 24 },
{ label: "T-Shirts", value: "t-shirts", count: 18 },
]}
/>Dropdown with checkbox rows and a selection-count badge. Keeps many-option filters compact in toolbars where a checkbox list would not fit.
Multi-select checkbox list with optional result counts. Works controlled or uncontrolled, designed for filter sidebars and toolbars.
Searchable dropdown for very long option lists like brands. Type to narrow options, select one or many, and see result counts inline.
Single-select radio list with optional result counts. Clicking the active option clears the selection, so the filter is always escapable.
Single-select segmented control built on Tabs for mutually exclusive choices like gender or condition. Clicking the active segment clears the selection.
Multi-select button chips for compact option sets like sizes. Works controlled or uncontrolled.