UI cheat sheet: dropdown field

• Standard style (attached)
• Standard style (detached)
• Rounded borders
• Dropdowns with icons and images
• Material Design’s filled dropdowns
• Material Design’s outlined dropdowns

• Active state
• Disabled
• Hover
• Highlight state
• Focus state
• Completed input
• Fail feedback

Ideally, keep the placeholder/prompt text similar to that of your free text fields. A few options:

• Leave the placeholder blank
• Have a generic prompt in the placeholder
• Having a promoting phrase in the placeholder
• Surface an option in the placeholder

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

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.

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.