Drop-Down List
A drop-down list is a control that displays a list of choices on click and allows selecting one option.
When to use
Single option
Use when a single option should be selected.
When multiple selections are possible, use checkboxes.
Options are objects or states
The possible choices are objects or states.
When options are actions, use a menu or a split button.
More than four options
The number of options is more than four.
When there are four options or fewer, use radio buttons.
Space is limited
The screen space is limited, so there is not enough room for radio buttons.
Default value is the most used
The default value is recommended for most users. A drop-down is a good way to hide unpopular alternatives.
In the example bellow a drop-down is used because Subpixels is the most popular choice. Using radio-buttons puts all options on the same level of importance or popularity.
Combined controls
If a control combines various UI elements as one setting, use a drop-down even if there are four options or fewer:
When not to use
Four or less options
If there are four options or fewer, use radio buttons.
Correct  | Incorrect  |
Multiple selection
If multiple selection is possible, use checkboxes.
Correct  | Incorrect  |
For a single selection use a drop-down.
List of actions
If there is a list of actions, use a menu or a split button.
Correct  | Incorrect  |
For a list of objects or states, use a drop-down.
Adding values
If users may need to enter a value not currently in the list, use a combo box.
Correct  | Incorrect  |
On a toolbar
If a drop-down appears on a toolbar, use toolbar drop-down instead.
Correct  | Incorrect  |
How to use
Label
Follow the rules for the input field.
Default value
Select the most likely or the safest value by default. In the xample bellow the safest value is Ask, the behavior will not be unexpected to users:
Do not use an empty value as the default value. If no values are added to a drop-down yet, replace it with a button to add values.
Correct  | Incorrect  |
Menu items
Capitalization
Use sentence-style capitalization for each menu item.
Correct  | Incorrect  |
No repeated words in items
Avoid repeating words in drop-down list items. Move repeating words to the label or after the drop-down.
Correct ![Drop-down menu labeled 'Refresh every [selection] minutes' with options '10', '15', and '30'. The selected option set to '10'](images/dropdown_how_to_5_correct.png "Drop-down menu labeled 'Refresh every [selection] minutes' with options '10', '15', and '30'. The selected option set to '10'") | Incorrect  |
Sorting items
Sort items in one of the following orders:
 | Logical order, for example, in a spatial relationship. |
 | Alphabetical or numeric order if the options are equivalent to make it easier to find items. |
 | Place the most common options first. If there are more than 10 options, separate the most popular options with a line. Sort the remaining items in alphabetical or numeric order. |
Grouping
Group related items using separators. Add group headers if possible.
With dividers  | With a divider and group headers  |
Actions related to a drop-down
If there are actions related to the drop-down, put them under the gear icon on the right:
Meta-options
Enclose meta-options in pointy brackets and place them at the beginning of the list when they're important or popular options. In other cases, place them at the end of the list.
Do not assign special meanings to numeric or string values, use meta-options instead. It can be unclear that either 0 or an empty string are used to disable an option.
Correct  | Incorrect  |
'None' in simple layouts
Replace the <None> option with a checkbox if it doesn't make the layout more complex.
Correct  | Incorrect  |
Use icons and font formatting
 | Add icons to the values if they're well-known. |
 | Use font formatting for a list of fonts. It will help users make a choice. |
Default and changed values
 |
|
Submenus are not supported
Submenus are not supported for the drop-down list. Use a tree view instead
Built-in behaviour
Opening the menu
A drop-down menu opens on clicking the drop-down button anywhere or pressing the Down key when the drop-down is focused.
The menu opens down by default. If there is not enough space, the menu opens up.
Selected value
When the menu opens, the default option (displayed when the menu is closed) is selected.
Moving the selection
Selection in the menu is moved by pressing Up and Down keys when an item is hovered. Selection is moved as well when hovering the cursor over an item but it doesn't update the value.
Closing the menu
The menu remains opened until the user selects an item, clicks outside the menu, presses the Esc key, or switches to another app.
Single-click activation
A dropdown should work with a single mouse click:
Clicking to open a drop-down.
Hover over an item to select it.
Release the mouse to confirm the selection and close the dropdown.
How to layout
Follow the labeled input controls guideline.