I'd like to allow selecting none from a dropdown menu (web). On the other hand, there are no labels so I would like to also let the user know what the dropdown is for.

What's a good way of achieving this?


download bmml source – Wireframes created with Balsamiq Mockups



Separate the UX concern from the implementation concern

From the UX perspective, what you are looking for is a placeholder. Placeholders are by definition non selectable.

Your real problem is how to implement the placeholder in a non-selectable way. That is beyond the scope of UX stackexchange, but this stackoverflow question shows a way to do it.

BTW having no labels in a form and relying on placeholders only is an anti-pattern so should be used with care....the Nielsen article referenced above outlines why.

| improve this answer | |

One way could be to place a little [x] next to the select element


download bmml source – Wireframes created with Balsamiq Mockups

Clicking that [x] will act as select none you can see it in action in my yadcf plugin showcaes (next to each column filter - including select elements)

Another way is to do something similar to select2 plugin (placing that [x] button inside the selected element) see it action in the fifth column filter in the showcase select any element and notice how the select looks like


download bmml source

Third variation of the [x] button would be to show it on hover over the select element - see it in action in the following sample (scroll down to the Custom column filtering section and hover over any of the table headers

| improve this answer | |
  • The question is about labeling the dropdown values, not about a way to reset the dropdown menu. – Marvin Mar 29 '15 at 9:19
  • 1
    @Marvin , I don't see that question as a labeling question at all, Select none is referring to a way of clearing the selection after a selection was made, that's my opinion about this question. – Daniel Mar 29 '15 at 10:12
  • 1
    You are right, I probably misunderstood the question. – Marvin Mar 29 '15 at 11:00
  • Thanks Daniel. You understood the question but I feel like @tohstr s answer is better because it makes me reexamine the problem and make a better design – Ben Mar 30 '15 at 6:21

you can use a plugin like Chosen http://harvesthq.github.io/chosen/

| improve this answer | |

Your Answer

