UI cheat sheet: dropdown field - Deepstash

Bite‑sized knowledge

to upgrade

your career

Ideas from books, articles & podcasts.

UI cheat sheet: dropdown field

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)
  • Native dropdowns
  • Accessibility checklist

STASHED IN:

2

published ideas from this article:

MORE IDEAS FROM THE SAME ARTICLE

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

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

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.

IDEA ABOUT

Discover and save more ideas by creating a

FREE

Deepstash account.

Develop a

reading habit

, save

time

and create an amazing

knowledge library

.

GET THE APP:

MORE LIKE THIS

Some changes that you can not make, if you want

  1. Deleting all your social media apps
  2. Reducing your home screen to six apps
  3. Forcing yourself not to use your phone

158

STASHED IN:

485

3 Bs

Boundaries: Have a designated space where you work. Avoid comfortable options like bed and couch.

Blocking: Make time blocks for each task and avoid multi-tasking

Breaks: Take regular breaks and do small workouts or take a power nap.

1

STASHED IN:

32

Learning By Being In Play Mode

In both children and adults, being in ‘play mode’ is an essential and overlooked factor in the quest to learn about our surroundings, discovering our capabilities and finding new information. Not having a goal in mind helps develop free form creativity and experimentation.

When we are not ...

4

STASHED IN:

64