Checkbox Tree

Check a parent to check its descendants; partial selection shows the native indeterminate state.

Show code

import { useState } from "react";
import { TreeKit } from "@treekit-ui/core";
import "@treekit-ui/core/styles.css";

export function OrgChecklist({ data }) {
  const [checkedIds, setCheckedIds] = useState<string[]>(["react"]);

  return (
    <TreeKit
      data={data}
      defaultExpandedIds={["engineering", "frontend"]}
      checkedIds={checkedIds}
      onCheckedChange={setCheckedIds}
    />
  );
}

See Selection to configure which direction cascading flows, or Permissions Tree for a real-world variant with disabled nodes.