I'm looking for a way to show multi-selection hierarchical component (perhaps a tree) which allow selecting either leafs or folders, with both bubble-up and cascade functionality.

Lets say I use some folder hierarchy:

enter image description here

I'm thinking about 4-states checkbox (select without children -> select with children -> select only children -> unselect).

Any better solution?

I've seen this question but none of the answers fit :(

Edit: relating to each solution in the similar question:

  1. I cannot use a map as it is not location based hierarchy.
  2. Adding another leaf for selecting parent only is OK, but it duplicates entries and may increase the tree size.
  3. Miller columns doesn't solve this issue.
  4. Adding "select all" button on hover doesn't fix touch devices. Also it looks too complicated to me.
  • 1
    Welcome to the site, @BobTheBuilder! Can you clarify how your question differs from the one you've linked to? My first instinct is to close this one as a duplicate, but you clearly already know the other one exists and see some difference. Please consider editing your question to clarify what this difference is. May 3, 2015 at 15:14
  • It'd help if you could explain your specific criteria (other than universal criteria like simplicity)-- the linked question already has a lot of answers that are good as far as any of us can tell...
    – bobtato
    May 3, 2015 at 17:31

2 Answers 2


Quick thought (I do not pretend to give the answer, but just some brainstorming): combine your proposal 2 & 4: for every list of descendants (at any level), add an extra child on top stating 'select all child elements. ( Rather then 'child elements', you should use the actual name, like 'cities', 'elephants' or bananas. )

You might consider sticking to just two states for your checkboxes, 'checked' and 'empty'. By doing so, you make it clear that every checkbox refers to JUST the item behind it.

exemple of idea

  • ... which looks quite a bit like the (downvoted) answer given by Erics in the question you linked to: ux.stackexchange.com/questions/9598/…
    – Ideogram
    May 5, 2015 at 13:51
  • Thanx! It looks like a good option - I'll try it :) @Ideogram - it is similar but not the same. At first - the new node doesn't have a checkbox. Also - leafs are not the children of "select all" node. May 6, 2015 at 6:53

This is a common pattern you see in multiselect tree hierarchy. It is most easily seen in microsoft installation interface when selecting languages ...etc.

enter image description here enter image description here

The following is from google drive:

enter image description here

Basically you provide a third icon [-] that shows that child is selected.

Microsoft also had different shading for the checks to show if all children were selected or only some. And you could toggle between the states by clicking on the parent. Clicking the parent also gave clearly labeled instructions

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.