1. Drop Down List is paired with the title of the drop down selector.
Display both title and the drop down selector.
Title can be displayed on the left side of the drop down selector i.e. Form UI; or on top of the drop down selector, e.i. Filter Box.
2. Select an item from Drop Down List.
Click on the drop down list menu to see available options. Choose one item from the menu list. Use scroll bar to scroll down to the list to see more available options.
Why Use This Pattern
Most users are very familiar with the Drop Down list widget. Drop down selector encapsulate complex selection options wthin a small space. It is commonly used in web applications; users understand this control. It is important that this control include a down arrow selector button to indicate to the user that there are options available.
What is the Solution
'Drop Down List' consists of a text box showing a default value or a selected value. Unlike 'Combo Box', user cannot enter text in the text box.
- A drop down list allows users to select a single value from a list of predefined values.
- It differs from a combo box in that users must select a value from the list; they cannot specify values that do not exist in the list.
- Sort list items in a logical order, such as grouping highly related options together, placing most common options first, or using alphabetical order
- Sort names in alphabetical order, numbers in numeric order, and dates in chronological order.
- Lists with 12 or more items should be sorted alphabetically to make items easier to find.
- Only a list with over 15 items should show a scrollbar. Otherwise the list use of scrollbar should be dependent on how far the dropdown edge is from the browser bottom edge. In other words: if the display of the list is constrained by the browser edge a scrollbar should be shown automatically to allow the user to scroll the complete list.
- No delay should occur for drop down list menu display. When the user clicks the drop down arrow button, the drop down menu list should be displayed immediately. However, if application performance circumstances require some delay it should not take more than 250 milliseconds to display the list.
When to Use This Pattern
- To allow the user to select a single value from a list.
- The list of available values is long and space is constrained.
- The auto-complete or auto-filter options would help the user to find the required values in a long list.
Do Not Use This Pattern When
- The user needs to select multiple values (use checkboxes or a list box).
- There are less than 7 options and the user needs to see them all at once (use radio buttons).
- The user must be able to add a value to the list (use a combo box).