React Checkbox Tree is a feature-rich React component for a checkbox treeview. Checkout the examples below and then view source code or main documentation page when you are ready to try it out.
Custom Icons Example
No Cascading Example
By default, the check state of a parent is determined by the check state of its children. Similarly, checking or
unchecking a parent node will cascade that status to all of its children. To disable this behavior, simply pass
Pessimistic Toggle Example
Try clicking a partially-checked node below. Instead of cascading a checked state to all children, the pessimistic model will uncheck children and their descendants.
Clickable Labels Example
By default, clicking on the node label toggles the checkbox value. By providing an
the checkbox will toggle only when clicking on the checkbox and the provided function will be called when
clicking on the node label.
onClick function is defined, passing the
expandOnClick property will also
expand the clicked node automatically.
Hide Checkboxes Example
Checkboxes can be hidden on a node-level by setting
showCheckbox: false for any given node. They
can also be more broadly hidden by the passing the
onlyLeafCheckboxes property, which will force
checkboxes to render only on leaf nodes.
Expand All/Collapse All Example
By passing in the
showExpandAll property, two additional options will appear at the top of the tree
allow the user to easily expand or collapse all parent nodes.
Large Data Example
The checkbox tree is capable of supporting a large number of nodes at once.
Filtering of nodes is also easily possible.