2

I have a dropdown with checkboxes as items. HERE is the working example

enter image description here

I let people select multiple options from this after they search for it One problem I notice is that it is not immediately obvious which items have been selected. enter image description here

  1. Should I add a button that says show selected, how does filtering work with that?
  2. Should I add a checkbox saying show selected, what happens during filtering?
  3. Should I add tags below this searchbox where each tag has a delete button and shows the selected item?
  4. Here is another way to rephrase the question, what is the easiest way the user will see their selected options in this?

Some guidance is super appreciated

4

Some alternatives:

Filter Tags: No need for users to click to expand the dropdown. They can see which ones are applied and remove them if wanted.

enter image description here

Summary of Selected Filters: Group selected options in a specific section towards the top, while repeating them in your list.

enter image description here

  • Thank you for the suggestion, based on your inputs, I have made a new version of the widget here codepen.io/zupkode/pen/EGvgvx Feel free to suggest improvements :) merry xmas – PirateApp Dec 27 '18 at 4:28
  • 1
    @PirateApp - I would keep the tags on the left and move the checkbox list to the right, this way the list doesn't jump position every time I select a new checkbox (which is annoying). Also, if the intention is to list all the selected filters in the bottom with "You selected...", then you should simply pull out all the tags and place them outside the dropdown. The common pattern (most ecommerce sites) is having the tags places close to the filter dropdown so the user can make the association that one affect the other. – Nicolas Hung Dec 27 '18 at 19:38

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.