What should I know before creating a dropdown design?
-
Dropdowns let users select an option from a menu triggered by interacting with a field. Some use "dropdown" or "select" to describe the field and menu together, others only one part.
-
Best for small, predefined lists in filters, settings, or forms where space is limited.
-
Avoid dropdowns for long lists, multiple selections, or binary choices—use comboboxes, checkboxes, or toggle switches instead.
-
Key elements include a label, selected value, helper text, clickable container, and an optional icon.
-
Native dropdowns refer to the default system menus, offering faster implementation and better accessibility, while custom dropdowns allow more design flexibility and control over styling, behavior, and functionality.
Deep dive
Dropdown design is commonly used in UI, allowing users to choose from a list of options by clicking a button or field. So, what is a dropdown? The terminology can vary, with some sources referring to the entire component (field + menu) as a dropdown or select.
Regardless of the naming convention, the essential function remains the same: a dropdown lets users select an option from a menu triggered by clicking on the dropdown field.
What is the anatomy of a dropdown UI?
A dropdown UI typically consists of the following parts:
-
Label: Text displayed above or inside the field, explaining the purpose of the dropdown.
-
Value: The option selected from the dropdown list, displayed inside the field.
-
Helper text: Optional instructions or notes below the field to guide users.
-
Container: The clickable box where users initiate the dropdown interaction.
-
Icon: A small arrow or chevron indicating that clicking the field will reveal more options.
When should I use dropdown UI design in the enterprise app interface?
Dropdowns are most useful for selecting from a finite list of options where space is limited. In enterprise apps, they often appear in:
- Filters: For narrowing down data or content (e.g., selecting a department or region, sorting).
- Settings: Where users can pick specific preferences (e.g., currency type or language).
- Data entry forms: To offer users preset options (e.g., selecting job titles or dates).
Is a dropdown a good choice for an input?
Dropdowns can be an effective input UX choice when the list of options is relatively short and predefined. However, they are not ideal for situations where users may need to input custom values or if the list of options is lengthy.
When should I avoid a dropdown component and what to use instead?
To better understand when dropdowns should be avoided in enterprise apps, let’s look at common scenarios where alternatives may provide a more effective solution.
- Long lists of options: If the list is too long, a regular dropdown can be cumbersome. Use a combobox (searchable dropdown) so users can type to quickly find options.
- Multiple selections: For settings like enabling multiple configurations, checkboxes offer clearer options by showing all choices upfront.
- Binary choices: For options like enabling or disabling features, toggle switches offer immediate, visual feedback.
- Fixed set of options: When the list is short and needs a quick, one-time selection, radio buttons are more straightforward.
What states does a dropdown have?
-
Rest: The default state, where the dropdown is either empty or filled with a selected value, with no interaction yet.
-
Hover: Triggered when the user moves the cursor over the dropdown, indicating it is interactive.
-
Inactive: The dropdown is not available for interaction, typically displayed in a way that signals it is disabled.
- Press/Focus: Triggered when the user selects or navigates to the dropdown using keyboard controls.
What are native and custom dropdowns?
The terms "native" and "custom" dropdowns refer to whether you're designing the dropdown menu or using the default system behavior.
-
Native dropdowns (right): These are the default menus that inherit the operating system's design. They are typically faster to implement and offer accessibility benefits, but they may lack customization options.
-
Custom dropdowns (left): These are designed to match the application's style and provide greater flexibility in how the dropdown looks and behaves. Designers opt for custom dropdown menus when they want more control over styling, animations, or functionality that native dropdowns don't provide.
What should I know about a mobile dropdown?
Dropdowns themselves don’t change between mobile and desktop versions; however, the dropdown menu may appear differently. On mobile, the menu might be displayed as a bottom sheet, a side sheet, or a modal dialog, depending on the design system or the device's conventions.
In some cases, the dropdown might be replaced by another control (such as a search field or segmented control) for better usability.
❓Questions designers should ask themselves
By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs.
-
Does a dropdown provide a clear selection of options?
-
Can users quickly find the option they need?
-
Will the dropdown perform well with larger datasets?
-
Does a dropdown align with the workflow of the enterprise app?
🤝 Credits
Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!
-
UI cheat sheet: dropdown field by Tess Gadd
📚 Keep exploring
Never stop growing. Explore resources on dropdown UX, thoughtfully handpicked by Cieden’s designers.
-
Select by Atlassian Design System
-
Dropdown by eBay Playbook
- Striking a Balance Between Native and Custom Select Elements by Sandrina Pereira