Dropdown - UI Element

A dropdown is a predefined collection of options that give the user the ability to select and choose from. It is a convenient and faster option that saves time from designing another page. Dropdowns help the user complete fields by offering them options or suggesting potential inputs.

Choosing the right dropdown menu can define your UI/UX design and bring the user experience to a whole different level.

1. Standard Dropdown Menus

This type of dropdown is a common design element. A dropdown needs to have the text hidden, and the dropdown menu should pop up only when an action has taken place.

2. Dropdown Menu with Autosuggest

These dropdowns are encountered in the search bar and can save a lot of time. The whole purpose of the dropdown with autosuggest is to offer you more variants, and it can prove to be very helpful when the users already know what they want to fill in. Autosuggest offers variants for the input field based on the letters or terms the user has typed so far. When you type the first letters, that autosuggest comes and offers the available suggestions.

3. Dropdown Menu with Autocomplete

The auto-complete process happens inside the UI text field, as the software predicts the available alternatives by using its internal dictionary. It analyses what the users intend to type depending on the first letters and the suitable options, filling in the most fitting variant available from the dropdown.

4. Dropdown Menu with Multi-select

This dropdown option is created with the help of checkboxes, an extension of checkboxes where the user has the ability to select multiple variants. However, this type of dropdown can quickly get overwhelming as you will be required to fill all the boxes the users are interested in.

5. Dropdown Menu with Groups

Dropdowns with groups gives the user the ability to be more organized as they can be found under different categories.

6. Combo Box

The combo box allows the user to choose an option from a predefined set of inputs or to customize an input.

7. Date Picker

This type of dropdown will only be efficient when the user wants to see exactly the day of the week. This type of dropdown is only helpful when the user is scheduling an appointment, a date, or an event.

• Attached style. This is one of the common styles that can be encountered. It is when the whole dropdown can be seen as a whole.

• Detached style. This is the opposite of the one from the above. The dropdown will have the menu detached from the selection available. At the same time, it can switch sides depending on the user’s viewport.

• Rounded borders. This one is as intuitive as it sounds. The dropdown design has rounded borders.

• Material design’s filled dropdowns. This type of dropdown depends only on the user’s personal preferences, as both filled and the outlined dropdowns look great. The filled dropdown has an item already filled by default.

• Material design’s outlined dropdowns. This dropdown type can be differentiated from the filled one, as the users can fill in the gaps with their chosen option.

• With images. Even though adding images to your dropdown can seem like a lot of work, it is worth it, depending on the size of your dropdown. The images can be too small and hard to observe, causing a bad user experience.

• With icons. The dropdown can include an icon at the beginning of the text, making it look more playful.

‍

• Active state. This is the primary state where the dropdown has yet to be interacted with.

• Disabled. This state of a dropdown will be noticeable, but the user will not be able to interact with it.

• Hover. This state should show the user that the possibility of an interaction with the dropdown is available.

• Highlight state. This state should appear when the user is trying to interact with the dropdown.

• Focus state. This state happens when the user interacts with the dropdown by clicking on it and deciding to make a certain action. Even more so, the option that represents the user's choice can also be highlighted.

• Completed input. This state should only take place after the user has completed an action so the dropdown can come to its initial state.

• Feedback fail. This state can only appear if one of the users made a mistake or a typo. We can all agree on the fact that at least once, we did something wrong.

‍

Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find dropdowns and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!

So, get your uinkits package and start designing now!

‍