Hierarchical checkbox tree for nested categories with expand/collapse rows. Checking a parent checks its whole subtree, and partially selected parents turn indeterminate.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { FilterTree } from "@/components/beste/component/filter-tree";
const categories = [
{
label: "Shoes",
value: "shoes",
children: [
{ label: "Sneakers", value: "sneakers", count: 24 },
{ label: "Boots", value: "boots", count: 10 },
],
},
{ label: "Accessories", value: "accessories", count: 12 },
];
<FilterTree
label="Category"
options={categories}
defaultValue={["shoes"]} // expands to shoes + sneakers + boots
onChange={(value) => console.log("selected:", value)} // includes descendants
/>Multi-select checkbox list with optional result counts. Works controlled or uncontrolled, designed for filter sidebars and toolbars.
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 segmented control built on Tabs for mutually exclusive choices like gender or condition. Clicking the active segment clears the selection.
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.
Switch rows for boolean product flags like on-sale or in-stock. Multi-select, works controlled or uncontrolled.
Star rows for minimum-rating filtering in the familiar n-and-up pattern. Clicking the active row clears the selection.