1

I have a search form where the user must tell the form what label(s)/bin(s) they would like to search in. If the user picks nothing, the form defaults them to search 'All Emails', as this will allow them to search on everything OR the user can select one to many labels/bins to search within.

When the user selects 'All Emails', they do not get an option to select other labels/bins, so they are disabled. Unchecking 'All Emails' enables the the other selections.

  1. Is this an intuitive control for the user?
  2. Is the checkbox vs radio button a viable option here?
  3. Should the multi-selected checkboxes clear or disable when 'All' is selected?

The application has 'system labels' such as inbox and sent, that the application creates, and 'custom labels' that the user can create.

enter image description here

  • This dropdown will also have a type-ahead feature to help the user filter the list. Once selected the selection will become 'tokenize' text and display the name of the selection. – ckwins Dec 19 '16 at 19:56
0

Think of the "Select All" option as a button rather than a checkbox, which performs the action of selecting/deselecting all checkboxes (not disabling).

If you click it, it will select all the checkboxes.

Once clicked it transforms into "Deselect All" so clicking it will deselect all checkboxes.

  • I think this makes the most sense. I need to create this checklist so that it has a type-ahead filter and the select-all/deselect-all button. Seems like alot to put in one selector...back to the drawing board! Thanks for your help. – ckwins Dec 19 '16 at 19:57
0

Being a bit old-school, personally I always prefer the classic radio/checkbox combo for this sort of problem:

(o) All Emails
( ) Selected emails
   [ ] Unlabelled
   [ ] Inbox
   [ ] Sent

etc. But admittedly then you still have more decisions to make: whether

  • whether to disable or hide the checkboxes when the "All Mails" radio button is selected
  • if you do neither, then whether to automatically select the "Selected emails" radio button when the user toggles one of the checkboxes.
  • I went back and forth on radio button vs no radio button and did a wireframe based on what you suggested. Thanks! – ckwins Dec 19 '16 at 21:19
0

Use a partial checkbox

One option is to use the same treatment that Windows has used. They have a separate value for a checkbox in which only some of the child elements are selected:

partial checkbox ui

This allows them to show at a higher level that some but not all of the child elements are selected. In your case, this looks a bit like the relationship you have between "All Emails" and the specific categories (all of the categories together equals "All Emails").

Behavior

The way the Windows implementation behaves is that if you click on the partial checkbox, the box becomes checked and all children of that element are checked as well. Clicking the same parent element's box will uncheck that box and all of its children. In this way, the parent element toggles a check all/uncheck all behavior.

Limitations

This becomes an inconvenient solution when there are a large number of items to check/uncheck, but I guess that's true with any checkbox group.

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.