UI cheat sheet: dropdown field

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