Checkbox Tree

Installation

Usage

import { useState } from "react";
import CheckboxTree from "@/components/ruixen/checkbox-tree";
 
const nodes = [
  {
    id: "src",
    label: "src",
    children: [
      {
        id: "components",
        label: "components",
        children: [
          { id: "button", label: "button.tsx" },
          { id: "input", label: "input.tsx" },
        ],
      },
    ],
  },
];
 
export default function MyComponent() {
  const [selected, setSelected] = useState<string[]>([]);
 
  return (
    <CheckboxTree nodes={nodes} value={selected} onValueChange={setSelected} />
  );
}

Props

Prop	Type	Default	Description
`nodes`	`TreeNode[]`	-	Tree structure (required)
`value`	`string[]`	-	Controlled selected IDs
`defaultValue`	`string[]`	`[]`	Default selected IDs
`onValueChange`	`(value: string[]) => void`	-	Callback when value changes
`className`	`string`	-	Additional CSS classes

TreeNode Type

interface TreeNode {
  id: string;
  label: string;
  children?: TreeNode[];
}

Features

Hierarchical nested structure
Expand/collapse nodes
Parent-child selection cascade
Indeterminate state for partial selection
Light and dark mode support