I am designing an application where the filters work like this: When a user selects a checkbox and then types, the selection is erased.

I would like to keep the selections as they are and present them at some part of the filter, in addition to allowing the user to remove a selection. Is there a best practice for this interaction?


  • So if I check off ROLL 1001 and ROLL 1002 I can then start typing in the search field and narrow down my results within ROLL 1001 and ROLL 1002? What happens is I scroll down through the list of options, don't see what I'm looking for, accidentally check RollD then scroll it out of view, type what I'm looking for in the search box but don't see what I need as my search results are being filtered? What situation would your users be able to search for what they need but wouldn't be able to find the result they're looking for without a using a checkbox filter first. Sorry for asking questions in
    – It's Dylan
    Mar 3, 2020 at 16:39

1 Answer 1


You can keep the selected options as removable tags right below the search field or below the list of options.

I have seen many e-commerce sites follow this pattern when filtering products.

See this example from a popular e-commerce site called Myntra from India:

enter image description here

You can either click the close icon on the individual tag or uncheck from the list to remove these tags.

Reference: https://www.myntra.com/

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.