Black Lives Matter. Please consider donating to Black Girls Code today.

Does Dropdown support changing color on click?

My application uses a lot of Dropdown elements to allow the user to segment the data that is shown. Some of the Dropdown elements have many options (between a few to small multiples of ten) and I’d like to allow the user not only to select properties “A”, “B” and “C”, but also their negations like “show me everything with not A and not B”.

I think I could nicely support this if the user could click on a Dropdown element to change its color to denote “not A”. For example, consider the multi-value dropdown example: imagine you could click on “New York City” and its color would turn red for example.

Is such behaviour supported already? This would feel like a simple extension of the component, but do I need to go down that road? If so, would you recommend me starting from the cookiecutter example?

Just in case my question was unclear, here’s a picture of what I mean. Imagine a user has just clicked on the (text part) of “New York City” and the box has turned its color red. Of course, if the user clicked on the “x” on the left side of “New York City”, that would make the whole element get unselected as expected.

Any idea?