34 |

35 | React Checkbox Tree is a feature-rich checkbox tree view for React. Checkout the examples below 36 | and the associated source code. 37 | Head to the documentation when you are ready to 38 | try it out. 39 |

40 | 41 |

Examples

42 | 43 |

Basic Example

44 |
45 | 46 |

Custom Icons Example

47 |
48 | 49 |

Disabled Example

50 |
51 | 52 |

No Cascading Example

53 |

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

58 |
59 | 60 |

Pessimistic Toggle Example

61 |

62 | Try clicking a partially-checked node below. Instead of cascading a checked state to all children, the 63 | pessimistic model will uncheck children and their descendants. 64 |

65 |
66 | 67 |

Clickable Labels Example

68 |

69 | By default, clicking on the node label toggles the checkbox value. When providing the onClick 70 | property, the tree will instead call the provided function and will restrict toggling to the checkbox icon. 71 |

72 |

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

76 |
77 | 78 |

Hide Checkboxes Example

79 |

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

83 |
84 | 85 |

Expand All/Collapse All Example

86 |

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

90 |
91 | 92 |

Large Data Example

93 |

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

94 |
95 | 96 |

Filter Example

97 |

Filtering tree nodes is possible.

98 |
99 | 100 | 108 |