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.

Examples

Basic Example

Custom Icons Example

Disabled 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 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. By providing an onClick property the checkbox will toggle only when clicking on the checkbox and the provided function will be called when clicking on the node label.

When the 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 buttons will appear at the top of the tree that allow the user to easily expand or collapse all nodes.

Large Data Example

The checkbox tree is capable of supporting a large number of nodes at once.

Filter Example

Filtering of nodes is also easily possible.