I have a list where a user can turn items on or off using a switch. I added a super above the label of the list to show how many items in the list are turned on.

Now the user can also filter the list using a search bar. But what should happen with this counter:

enter image description here

Option A
The counter should always display the same number. In the example above, there are 2 items checked and the number shows 2. And despite that the user filters the list and only 1 item is now VISIBLY checked, the number still shows 2.

Option B
The counter should only display the number of selected items in the current filter. In the above example, the user filtered on "Pea" and now only sees 1 item checked, so the counter shows 1

  • 1
    Is "apple" switched off when it is not shown due to the search term "pea"? This should answer your question, right?
    – jazZRo
    Commented Jun 17 at 14:06

3 Answers 3


Filter is always designed and perceived as a visual changes, if the filtration is real time it will be more clear for user that the changes happening is just a matter of what he sees and that doesn't affect the real list options ( what is on and what is off )

it may be more helpful if you placed the filtration bar under the title, it may indicate more that filtration action is sub and temporary.

it also will help if the number format was 2/10 instead of 2, so the user always knows that the number is calculated based on the real list and not what he sees after filtration.


The most common pattern is to divide the results field into tabs, in the case of the question it would be "Selected Users" and "Filtered Users".

enter image description here

  • THe search in my scenario is actually a real-time filter. If you type, the list instantly changes to matching letters
    – DennisW
    Commented Jun 18 at 8:56
  • The example in the question is a real time filter with results in tabs
    – Danielillo
    Commented Jun 18 at 9:17

Why did you put in a counter in the first place?

What is the informational value to the user, knowing there are 50 or 500 (i.e., in both cases more than fit on the screen) entries? Does that value carry over to the search results?

As I don't know your business and requirements (feel free to extend the question so we can give more helpful answer!), here are some thoughts.

  • The entire list will have more than the 2 or 3 entries of your example (in that case, you don't need a counter). So I assume a large number (hundreds) in the unfiltered case.

  • A counter is good when there are a few alternatives (like, several tabs) and the user can infer from the counter in the tab title whether there are entries at all, and whether it is worth navigating to the tab. That does not seem to be the case here.

  • Any UI element is not good if there is no scenario where it helps the user achieve her goals. In that case, it's only UI chrome, and should be removed. That's why you should only put a counter there if it has some value.

  • When the process is to locate a specific item to do something with it, and you have a real-time filter, I don't see much value in the counter. The uses sees in the list whether the relevant items are in there (except: The search terms are usually not able to reduce the list to a handful of matches).

  • When the process is to submit a larger set of items to some batch processing, the counter probably is useful.

Here, speculation starts without more information of the process you want to support.

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.