React Checkbox Tree is a feature-rich checkbox tree view for React. Checkout the examples and source code below. Head over to the documentation page to see the full list of options.

Examples

Basic Example

Custom Icons Example

Disabled Example

No Cascading Example

By default, the check state of children determine the check state of a parent. Similarly, checking or unchecking a parent node will cascade that status to all of its children. To disable this behavior, simply pass the noCascade property.

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. When providing the onClick property, the tree will instead call the provided function and will restrict toggling to the checkbox icon.

When the onClick function is defined, passing the expandOnClick property will also expand the clicked node automatically.

Hide Checkboxes Example

Set showCheckbox: false at the node level to hide its checkbox. To force the tree to only render checkboxes for leaf nodes, pass the onlyLeafCheckboxes property.

Expand All/Collapse All Example

By passing in the showExpandAll property, two additional buttons will appear at the top of the tree that allow the user to expand or collapse all nodes.

Large Data Example

The checkbox tree can support a large number of nodes at once.

Filter Example

Filtering tree nodes is possible.