Hierarchical checkbox tree for nested categories with expand/collapse rows. Checking a parent checks its whole subtree, and partially selected parents turn indeterminate.
The import and the props worth knowing about, in one place.
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
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Tab | Move between the boxes — each is its own control, not one list with an inner cursor. |
|---|---|
| Space | Tick or untick the focused one. |
| The disclosure arrow | Opens a branch. Ticking a parent takes its children with it. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Optional group heading rendered above the tree |
options | FilterTreeOption[] | — | |
value | string[] | — | Controlled selection; omit to let the component manage its own state. Checking a node checks its whole subtree, and a parent turns indeterminate while only some of its descendants are selected. The selection always contains every checked value, descendants included. |
defaultValue | string[] | — | Initial selection when uncontrolled; parents expand to their subtree |
defaultExpanded | string[] | — | Values whose children start expanded; ancestors of the initial selection expand automatically |
onChange | (value: string[]) => void | — | |
className | string | — |