I'm searching for a good/alternative solution to handle multi-state selections in a check box tree. A normal check box tree is mostly doable, because it has three different states.

mock up showing root folder, secondary folders with tri-state check boxes, and files with bi-state check boxes

It might not be the best solution, but most of our users know how to use it. My biggest issue is, what happens if the parent nodes themselves are selectable items? Assume the tree is a company site structure having world regions as nodes and countries as leafs. The customer should be able to select a world region and also be able to select a country. All selected items will be shown in a report later.

What would something like this look like?

two mock ups showing root folder, secondary folders with two bi-state check boxes or color icons, and files with bi-state check boxes

Does it make sense to show the node with double check boxes or with color indicators? Or may be using something like miller columns?

miller column

Does anybody have a solution for this problem they've seen before or have a suggestion for a much smarter solution?


Just as food for thought - and I have no idea if this will suit your situation, but you might try considering a completely different approach to the problem. You said this was to let the user choose world regions and countries - how about letting the user interact with more meaningful data like the mock-ups below.

The user simply selects one of 6 or 7 regions on the map, then can select the check box for that region and all, some or none of the ones for the actual countries in that region, either individually or using the select all/select none buttons.

enter image description here

  • 3
    That's indeed a nice approach. Even if the region/country stuff was just an example. In our application we use many different types of trees and users can build up trees in different ways. Perhaps i have to step back and find a totally different approach like yours.
    – Timo
    Aug 3 '11 at 11:00
  • 1
    Indeed, thinking in a different way and being open to such thought is a great plan. And with various types of data you will be able to visualise it better in some other form and increase the value. Aug 3 '11 at 13:13
  • i like the concept, but your making the assumption that your users have geographic skills.
    – jakc
    Mar 23 '12 at 22:24
  • @Simon well not necessarily - I wasn't intending the user to have to know where a location would be found. The handful of top level regions could easily be labeled and the map is intended more as a contextual visual feedback as opposed to the rather abstracted standalone tree/list/checkbox presentation. I always think if you can make an interface interesting as well as functional, you go a good way to making the user's experience a bit better. Mar 23 '12 at 23:39

Perhaps it could also be an solution to split parent nodes into a leaf and a parent in case of they are selectable. But this does not looks really nice in large trees.

enter image description here


I currently have a quite similar problem and, thinking about the miller columns, an idea that comes to my mind is to indicate the number of selected items over the total number of items in the sub-level.

enter image description here

Then, a variation in the font weight/color of a full selected folder can help to visualize quickly the "fully selected" state.

  • Folder 1 - 2/15
  • Folder 2 - 10/10

Maybe you can find here some inspiration !

  • 1
    I had some bad experience with miller columns. We used it in a product 2 years ago and nearby no user really understand how it works. Unless they are not comming from Unix or Mac OS X, mostly no user have seen them before. Specially windows users asked us so many times how this should work :-(
    – Timo
    Aug 3 '11 at 9:58
  • I understand what you say and have no doubt about it, but many things have changed in the last two years, and users get used with interface elements and interactions that were very rare at this time. I'm not saying that millers columns are the perfect solution, but rather that you should not be affraid of a bad experience happened two years ago :) Aug 3 '11 at 10:09
  • 1
    I'm not affraid of using miller columns. But i see it almost every day, when somebody is stepping behing my mac and sees my finder in miller column view :-) I love miller columns, because i'm so fast with it
    – Timo
    Aug 3 '11 at 11:06

Consider positioning checkboxes at the end of the row.In that case tree will be lot more usable for more nested items than just 1 or 2. I see this as very important aspect, see for example this Blend Navigator with its flags (checkboxes) at the end of the item row. http://help.syncfusion.com/ug_84/User%20Interface/WPF/Tools/ImagesExt/image37_423.jpg Also switching whole groups is solved there..


In tree menu, if checked state on folder (e.g. Africa) doesn't mean selecting all items(countries) in it, so you're doing something wrong and you have to reconsider architecture. Maybe make a list with highlighted titles, instead of tree...

If the folder in not selectable itself, so tri-state checkbox will work here great.

tri-state checkbox

Show "Select All" buttons on hover.

enter image description here

  • Perhaps the region/country stuff was a bad example. In may case this selector type is required in report generators. The parent nodes can contain data itself and therefore you can selected without meaning to select the items below too. Changing the architecture isn't so easy, because it is already there. We try to find a nicer way to select items instead of scrolling to the whole list every time.
    – Timo
    Aug 3 '11 at 11:10
  • Ok, I get your problem now. See the image I've attached. Aug 3 '11 at 12:18

Another approach is to break out the "select all" behaviour or the "select just the enclosing entity" option into an extra line item.

We tackled the problem like this, where each top level category can be selected for summary only treatment, or individual subcategories selected, or all sub-categories selected.

category selector

This way a category that has (say) 250 sub-categories doesn't have to overwhelm the report, while still allowing the person generating the report to pull out and highlight particular sub-categories.

  • In the example image, the "Account one" and "Account two" sub-categories of "Operations" will be listed in the report with sub-totals, as well as a summary for the "Operations" category itself, while the "Investments" category will only have a summary with no break outs of sub-categories.
    – Erics
    Oct 17 '11 at 11:01
  • i dont like the '-' styling it implies -to me- that it collapses part of the tree and not the amount of checked items
    – colmcq
    Oct 17 '11 at 11:24
  • Yeh, it's the horrible tri-state checkbox thing. Have also seen it done with a dot instead of the tick.
    – Erics
    Oct 17 '11 at 11:39
  • -1 because this answer appears to be a duplicate. @Erics, can you clarify how this answer differs from Stefan Gehrig's earlier answer? May 3 '15 at 15:21
  • @GrahamHerrli the duplication of node-name as two lines is avoided, and more clear indication of hierarchy is provided.
    – Erics
    May 4 '15 at 16:32

What we did in this case is add the parent node as the first item in the list so the user will be able to select it as a stand alone item:

enter image description here

  • This case is in the question itself
    – Devin
    Jan 14 '17 at 16:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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