Drop it like it's hot: Traversing through the diverse world of dropdown interactions!

A little introduction

Dropdowns are one of the most versatile components in our design arsenal. They're like the Swiss Army Knife of interface elements, able to handle all sorts of tasks with ease. Need to select a menu entry? Check. Want to choose an action? Check. Looking to pick a user from a list? You guessed it: check.

Technically, dropdowns are just input fields that let users select a set or subset of menu entries by opening a list. It's like opening a present on your birthday or unfurling a curtain to reveal a surprise. And that's where the name "dropdowns" comes from. The list traditionally drops downwords. It's not just a functional component; it's a delightful one too.

Throughout my career in product design, I've lost count of how many times I've been asked the same question: "Which dropdown should we use?” and “how should it behave?" Although the answer to this question is highly contextual, I have found myself providing the same advice to developers and junior designers time and time again. So, I decided to create a comprehensive knowledge base for my colleagues that documents the many different types of dropdown interactions.

We use dropdowns for all sorts of scenarios, from selecting menu entries and actions to choosing users and more. And some dropdowns are even smarter than others, letting you type in the field to add a tag or email, or search as you type to quickly find what you're looking for. Some even let you create new entries on the fly, adding them to the list for future reference.

Ready to dive into the world of dropdowns? Let's explore some of the most common use-cases of this magical component!

Selecting single entry: Simple dropdowns

This kind of dropdowns are used to select a single entry from a menu. At no point, this can be used to select multiple entries or even search or create new entries. This dropdown field simply, as the name suggests, performs one action at a time.

Selecting multiple entries

This dropdown lets you enter multiple entries at a time. Depending on the context of how you need to show these multiple entries, there are couple of subtypes. But we will discuss them shortly. These kind of dropdowns may or may not be able to search, based on the purpose of these dropdowns.

For example, if you have a long list of locations, your dropdown may be able to search them if you type the desired entry in the input field. But if you have a handful of entries that can be shown in a list without extending it beyond your viewport, then your dropdown may not need search at all. Remember consistency is all about context!

Note: In both cases, in the input field, we are not going to show the selected entries as there can be many. Showing couple of one and then showing “show more” or “100 more” is pointless. Instead, we will show the number of selected items.

Sometimes we need to select entries from a list and show them as tags. Selecting tags or input chips from a dropdown works the same way as selecting multiple entries whether you can add new tags in the system or not. The only difference is that how we show the selected items in the input field – since tags or chips are primary components on their own and most importantly, tags and chips quickly tell a lot more about a form than selected menu entries.

N.B.: A primary component is something that has been created in Tier 1 of the Design system and is not built on anything other than 3 primitive components that are colour, text and icons.

If enough space is available:

If there is enough vertical space available in the tag/chip selection dropdown, we will show all selected tags in the input field without compromising the horizontal width of the field.

If enough space is not available:

If not enough vertical space is available or if there are restrictions on pushing components below this type of dropdowns, we can show the selected tags/chips in one row, not extending to a second row inside the input field. Extra tags can be shown as a cancellable tag itself that may say “+ <number of excluded tags>”. So for example, if we have 10 tags, and only 3 can fit in one row, we show those 3 tags and add one more (count) tag called “+7” after them. These 3+1 tags should fit the inner width of the input field.

Use of BACKSPACE or DELETE key on the keyboard can clear this kind of fields besides the cross button in the tags themselves.

The excluded tags can be shown by hovering the cursor on the count tag, which will trigger a tooltip containing the list of the rest. Clicking the field again will summon the dropdown list again from where users can add more tags.

Creating new entries or tags while selecting

Now we need to talk about dropdowns where we can add inputs based on our preferences. If a tag or chip is not available in the dropdown list, we can type it in the field and hit a certain key like TAB or ENTER or, (comma) to create a new tag. Newly created tags can be managed by a tag management system.

Creating new tags are easy. And even more easy if we have abundance of free vertical space. But it gets significantly difficult if we have to exclude some tags from showing and also add new ones because we always type after the last tag.

Here to rescue, we can have a special input field component called a floating field. We can find the existence of such fields in Notion, Apple Numbers or Google Sheets, where users need to enter data in a very compact field. This type of field basically appears on top of the existing input field in a hovering position (hence the name floating field) and it shows the rest of the data that we can not fit in the original field. This field being in an absolute position and free from the parent bounding box, allows itself to extend horizontally and vertically to show all the data that we need. Clicking outside of this floating field, closes it and adds the newly added data to the input field.

These same practices will also apply when we will select users from the dropdown list. We will discuss that in more detail in Adding users to a list.

I will keep adding more to this list if I find more usecases. Meanwhile, let me know if I missed something. ✌🏼