Text search input with a leading icon for keyword filtering. Debounce in the consumer if you fetch on change.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { FilterSearch } from "@/components/beste/component/filter-search";
<FilterSearch
label="Search"
placeholder="Search products"
onChange={(value) => console.log("query:", value)}
/>Switch rows for boolean product flags like on-sale or in-stock. Multi-select, works controlled or uncontrolled.
Single-select segmented control built on Tabs for mutually exclusive choices like gender or condition. Clicking the active segment clears the selection.
Searchable dropdown for very long option lists like brands. Type to narrow options, select one or many, and see result counts inline.
Dropdown with checkbox rows and a selection-count badge. Keeps many-option filters compact in toolbars where a checkbox list would not fit.
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.
Star rows for minimum-rating filtering in the familiar n-and-up pattern. Clicking the active row clears the selection.