Checkbox Tree | Zyeon UI

① Permission tree (3 levels, cascade on by default) — ticking a category cascades to the permissions below it that are actually available, and the parent state (checked / indeterminate / unchecked) is derived entirely from its children. The two rows with a lock icon are disabled: "Read articles" is locked on, "Issue refunds" is locked off, so Billing can never reach fully checked — it stops at indeterminate.

② The same tree with cascade={false} — parent and child are fully independent: ticking "Content" writes that one id into value, touches no child permission, and there is no indeterminate state left (aria-checked is only true/false). disabled still blocks.

③ search — typing "export" filters out the unrelated branches, expands the whole path to every hit and highlights the matched fragment (the three exports sit at level 3 under Analytics / Finance); typing "zzz" lands on the no-results empty state. Clearing the field restores the expansion state from before the search.

Analytics

Finance

Security

④ Large data — 560 nodes in total (10 regions × 5 clusters × 10 hosts = 500 leaves), scrolling inside maxHeight={320}. Collapsed subtrees are unmounted rather than hidden, so the DOM holds only 15 rows right now; expand a cluster and ticking a region still cascades to all 50 of its hosts in one go.

⑤ Keyboard — press Tab to move focus into the tree (the whole tree is a single stop), then work through the table below; the focus ring is drawn on the row, never around the entire expanded subtree.

↑ / ↓: Move focus between the currently visible nodes (collapsed subtrees are skipped whole)
→: Expand the branch; on an already expanded one, step into its first child
←: Collapse the branch; on a collapsed branch or a leaf, jump to the parent
Space / Enter: Toggle the focused node (a branch cascades to the leaves it can reach)
Home / End: Jump to the first / last visible node
*: Expand every branch at the focused node's level
Letters: Jump to the next visible node starting with that letter (type on to build a prefix)
Tab: The whole tree is one Tab stop (roving tabindex); press again to leave it

⑥ Edge cases — the top half nests 8 levels deep at 16px of indent each, where the very long level-8 label truncates instead of pushing the row out of the card; the bottom half disables the whole "Archived project" subtree: it and every descendant are unclickable and can never end up selected, but the branches still expand for reading.