<ul><li>If you have fewer than five options</li><li>If it would be easier to type than to select</li><li>If you have two options and they are ‘on’ and ‘off’ (or ‘yes’ and ‘no’)</li><li>If the options are numeric</li><li>If there are a lot of options</li></ul>

When not to use a dropdown

We tend to use native or default options when time and budget is tight or when we are working on an MVP. Having custom inputs are the frosting on the cake, but sometimes we don’t have the option to make that sweet, sweet icing. In that instance, it is good to know what you have to work with.Native dropdowns are just safer as well when it comes to usability across different devices.

 Native dropdowns

A shell is when a field looks custom, but when you click it, it uses the native dropdown styling. This is a simple way of keeping the style of the page looking consistent with your brand and lowering dev cost. It also helps with all the UX issues that come with custom fields.

The Shell Dropdown

there are two main types of dropdowns: those used for navigation and those used in forms. We look at the Form variant: <ul><li>Dropdown types and variations</li><li>Dropdown styles</li><li>Dropdown states</li><li>What the placeholder should say</li><li>When not to use a dropdown (and when to)</li><li>Native dropdowns</li><li>Accessibility checklist</li></ul>

UI cheat sheet: dropdown field

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. <ul><li dir = "auto">Standard dropdowns</li><li dir = "auto">Dropdown with autosuggest</li><li dir = "auto">Dropdown with autocomplete and autosuggest</li><li dir = "auto">Dropdown with multi-select</li><li dir = "auto">Dropdown with groups</li><li dir = "auto">Multiple select menu</li><li dir = "auto">Date picker</li></ul>

Types and Variations

<ul><li dir = "auto">Standard style (attached)</li><li dir = "auto">Standard style (detached)</li><li dir = "auto">Rounded borders</li><li dir = "auto">Dropdowns with icons and images</li><li dir = "auto">Material Design’s filled dropdowns</li><li dir = "auto">Material Design’s outlined dropdowns</li></ul>

Dropdown styles

<ul><li dir = "auto">Active state</li><li dir = "auto">Disabled</li><li dir = "auto">Hover</li><li dir = "auto">Highlight state</li><li dir = "auto">Focus state</li><li dir = "auto">Completed input</li><li dir = "auto">Fail feedback</li></ul>

Dropdown States

Ideally, keep the placeholder/prompt text similar to that of your free text fields. A few options: <ul><li>Leave the placeholder blank</li><li>Have a generic prompt in the placeholder</li><li>Having a promoting phrase in the placeholder</li><li>Surface an option in the placeholder</li></ul>

The Placeholder

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…

Dropdown States

Similar ideas to Dropdown States

Methods

The Agile Project Management Mindset Pt6

A meditative state