My web app shows a list of tasks. I can filter them (for instance by done/todo, etc.) along 3 or 4 criteria. What kind of UI is the best to control the criteria ?

All criteria are "closed", i.e. there is no text input like a search field for instance.

  • The post title says buttons, are you sure you want the UI element to be a button or is the question open to all kind of UI elements? Commented Jan 4, 2012 at 15:34

5 Answers 5


I can merely guess what your list looks like, but what about some kind of segmented control above the list? If you make it possible to select more than one at a time, it's like checkboxes, just better. ^^

Showing: enter image description here

Where One Two Three in your case would read Todo Doing Done.


If your options aren't many in number, and aren't mutually exclusive, the typical pattern is to use checkboxes. Checkboxes are quick to parse and fast to manipulate.

If the options are small in number, but mutually exclusive, stick to radio buttons.

If the options are large in number, or there are many categories, and they are mutually exclusive, employ a dropdown menu. Dropdowns are the least attractive option as they hide their options by default and take slightly more mouse action to operate.


There are several options available and it all depends on 1) the number of options that can be selected at once and 2) the available space.

"One option selectable, little space available" would be a drop-down list.

"One option selectable, plenty of space available" would be radio buttons or a variation thereof with JavaScript & CSS.

"Many options selectable, little space available" would be a drop-down list with check boxes next to times akin to what most spreadsheet editors offer for filtering.

"Many options selectable, plenty of space available" would be a list of check boxes or a variation thereof with JavaScript & CSS. Alternatively, you can employ a list-box but you would need to instruct users to hold CTRL when selecting multiple items & the interaction might not be as smooth as with others.


Use a drop down

enter image description here

A drop down will allow you to choose from a predetermined list of options and display the chosen option (if there is a single option).


Ideally, rather than employing a drop-down, you would make a custom scrollable list containing the items and checkboxes. See Gmail, or the interface for selecting friends when inviting them to a Facebook event for examples.

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.