Star rows for minimum-rating filtering in the familiar n-and-up pattern. Clicking the active row clears the selection.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { FilterRating } from "@/components/beste/component/filter-rating";
<FilterRating
label="Rating"
defaultValue="4"
onChange={(value) => console.log("minimum rating:", value)} // null when cleared
options={[
{ label: "4 & up", value: "4" },
{ label: "3 & up", value: "3" },
]}
/>Single-select segmented control built on Tabs for mutually exclusive choices like gender or condition. Clicking the active segment clears the selection.
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 radio list with optional result counts. Clicking the active option clears the selection, so the filter is always escapable.
Hierarchical checkbox tree for nested categories with expand/collapse rows. Checking a parent checks its whole subtree, and partially selected parents turn indeterminate.
Switch rows for boolean product flags like on-sale or in-stock. Multi-select, works controlled or uncontrolled.
Paired number inputs for open-ended ranges: either side can stay empty, so users can filter by only a minimum or only a maximum.