As shown in figure, can click "Completed", the list will filter out green "Completed"? Similar to a dropdown.

After clicking,"legend" should have what kind of visual feedback? Or add a chekbox in front of the "legend" ?

Who's seen a similar example ?

enter image description here

1 Answer 1


The option 1 that you mentioned does not make good UX just because your legend feels like a label, at first user will not have any clue that it can be selected.

Option 2 will be fine but I would suggest few enhancement that you can add to that:

-> You can make the text of selected legend Bold.

-> Or you can also make UI better like shown below:

enter image description here

-> Use the border and background color as per legend (e.g. green for completed, yellow for pending)

-> If you prefer more customiztion than replace circle radio with the checkbox that you mentioned in option 2.

Design I have showed is particularly for mobile, but I hope you got the hint on how to take advantage of it in your website.

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.