Dropdown styles

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.

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.

there are two main types of dropdowns: those used for navigation and those used in forms. We look at the Form variant:

• Dropdown types and variations
• Dropdown styles
• Dropdown states
• What the placeholder should say
• When not to use a dropdown (and when to)

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 ...

• 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