{"library":"react-checkbox-tree","title":"React Checkbox Tree","description":"react-checkbox-tree is a React component designed to render a hierarchical tree of checkboxes. It provides a simple and elegant solution for implementing multi-select functionality with nested options. Currently stable at version 2.0.1, released in April 2026, the library recently underwent a major accessibility-focused overhaul in its 2.0.0 release. While its release cadence has historically varied, with a significant gap before the v2.x releases, the recent activity suggests ongoing development. Key differentiators include its controlled component architecture, support for customizable icons (including Font Awesome v4, v5, and v6), robust accessibility features, and strict enforcement of unique node values to optimize performance for internal state management.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-checkbox-tree"],"cli":null},"imports":["import CheckboxTree from 'react-checkbox-tree';","import 'react-checkbox-tree/lib/react-checkbox-tree.css';","import type { Node } from 'react-checkbox-tree';","import type { OnCheckChangeEventHandler } from 'react-checkbox-tree';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport CheckboxTree from 'react-checkbox-tree';\nimport 'react-checkbox-tree/lib/react-checkbox-tree.css';\n\nconst nodes = [\n  {\n    value: 'grand-parent',\n    label: 'Grand Parent',\n    children: [\n      { value: 'parent-1', label: 'Parent 1',\n        children: [\n          { value: 'child-1a', label: 'Child 1a' },\n          { value: 'child-1b', label: 'Child 1b' },\n        ],\n      },\n      { value: 'parent-2', label: 'Parent 2' },\n    ],\n  },\n  { value: 'single-node', label: 'A Standalone Node' }\n];\n\nfunction MyCheckboxTreeWidget() {\n  // State for checked nodes, initialized as an empty array\n  const [checked, setChecked] = useState<string[]>([]);\n  // State for expanded nodes, initialized as an empty array\n  const [expanded, setExpanded] = useState<string[]>([]);\n\n  return (\n    <div style={{ padding: '20px', maxWidth: '400px', border: '1px solid #eee', borderRadius: '5px' }}>\n      <h2>Hierarchical Selection</h2>\n      <p>Selected items: <strong>{checked.length > 0 ? checked.join(', ') : 'None'}</strong></p>\n      <CheckboxTree\n        nodes={nodes}\n        checked={checked}\n        expanded={expanded}\n        onCheck={(checkedList) => setChecked(checkedList)}\n        onExpand={(expandedList) => setExpanded(expandedList)}\n        showExpandAll={true}\n        showNodeIcon={false}\n      />\n    </div>\n  );\n}\n\nexport default MyCheckboxTreeWidget;\n\n// To use this in your App.tsx or App.jsx:\n// import MyCheckboxTreeWidget from './MyCheckboxTreeWidget';\n// function App() {\n//   return <MyCheckboxTreeWidget />;\n// }","lang":"typescript","description":"This example demonstrates how to integrate `react-checkbox-tree` into a React application, managing its controlled `checked` and `expanded` states using React hooks. It also shows the necessary CSS import and basic node definition.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}