Dropdowns get a lot of flak from the UI world – and if we are honest, it’s not without reason. Done badly, they become cumbersome, overwhelming, and ugly. But that’s not what this cheat sheet is about. Here we will talk about what to do when you have to use them.

I also want to clarify that there are two main types of dropdowns: those used for navigation and those used in forms. For this cheat sheet’s purpose, we will just be looking at the form variant.

In this cheat sheet, we will go over the following:

1. Anatomy
2. Dropdown types and variations
3. Dropdown styles
4. Dropdown states
5. What the placeholder should say
6. When not to use a dropdown (and when to)
7. Native dropdowns
8. Accessibility checklist
9. Closing thoughts

1. Anatomy

The anatomy of a dropdown is very similar to that of a text input field - plus a bit more. To compare the two, see this earlier story.

Dropdown field anatomy

2. Dropdown types and variations

While standard dropdowns are widely understood, there are a few different types and variations that you may need to consider for your next endeavour. Please note that for these examples I am only including dropdowns used in forms and not those used in navigation.

Standard dropdown

The standard dropdown is what we think of when we hear the word ‘dropdown’. In its active state, it should look very similar to a text input field until you click on it and it opens up a menu.

Standard dropdown

Dropdown with autosuggest

I love these sexy bad boys. The first time I was aware of autosuggest was in Google’s search field; however, I have no idea where it was first implemented. (Let me…