Another designer and I were having a discussion about the best way to show a list with checkmarks where only some of the selections have been chosen. This particular interaction will have multiple expanding/collapsing selections, each with the ability to select multiple items. His idea is to use something similar to what Gmail has with showing a dash for the sections that have only have some of the items selected. A section with none selected would have a blank checkbox. A section with all the items selected would have a fully darkened checkbox.


My opinion is that users will mistake that icon for a "collapse the section" icon and that something more like a grayed-out checkbox would work better to give the desired indication.

Have any of you run into something like this? Is the icon intuitive enough as it is or would something else work better?

  • Can you add some text next to the expanding/collapsing icon describing the action?
    – user44210
    Feb 26 '14 at 23:01

This is the most clear way I've seen to implement tri-state check boxes:

enter image description here

  • 1
    This is the better option but since browsers [edit: IE does it like this] only support the dash people will likely get used to it. IMO we should ask Google to change the indeterminate state to this.
    – Jonathan
    Feb 26 '14 at 23:18
  • I agree. Given the choice I would use the browser's native rendering of most controls in order to keep the visual cues users have learned consistent. Feb 26 '14 at 23:24

The dash icon certainly looks and feels like it would collapse the section.

Have you considered being more verbose and showing a count of the selected items?

Chosen 3 of 5 items

This could be either in the section heading or the footer.

Also this message could be tailored to the section / site or even theme:

Selected 3 of 5 website features


(2 of 5 features selected)


[1 of 5 tasks completed]


Further to this, I've found that a checkbox above other checkboxes (especially in isolation) is a 'toggle select all' feature, so I would be expecting any other sort of box icon in that location would be used to toggle the selection below as a whole unit.

Obviously depends on other factors and the intent, as the dash icon would indicate a collapse action instead.

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.