Dropdown List Box
Usage | Design-relevant Attributes | Related Controls
|
The dropdown list box is a field with an arrow icon on the right side. Clicking on this icon drops down a list immediately below the field and shows the user which values can be chosen. An entry in the list is called list box item. The dropdown list box is read-only. |
| Figure 1: A dropdown list box with six language items | |
Usage
Use dropdown list boxes:
- To support the selection of a value from a limited quantity. The number of items should not exceed 20.
- To switch between views on large amounts of data. Especially in iViews, this is a good method to save space. With dropdown list boxes, more views are possible than, for example, in a tabstrip, because the number of views is not limited by space. However, the list should not be longer than about 12 items.
- In a shuffler for filtering a larger data set, in order to get simplified and reduced views of the data. The shuffler mimics natural language statements for formulating the query, but can also be used with query statements consisting of words only. The query statement is typically assembled by combining static texts with dynamic elements like dropdown lists, edit fields and selection elements.
Note: The dropdown list box control does not render a descriptive label automatically. Use the label control to add a description.
The following table shows examples for the usage described above:
|
Selection of a value |
|
View selection |
|
Dropdown list box used in a shuffler |
Table 1: Usage examples for the dropdown list box
Choosing the Appropriate Selection Control
A dropdown list box is similar in function to a list box - both offer a list of items where users can select one item from, that is, both are single-selection lists.
See Forms - Using Different List Types for guidelines on choosing the appropriate selection control.
Note: For very small item numbers (2-6) and if the users should immediately see all alternatives, use radio buttons for single-selection choices.
Design-relevant Attributes
The dropdown list box can be set to an enabled or disabled state. Set attribute disabled to FALSE to enable a checkbox, set disabled to TRUE to disable it. To see an example of an enabled dropdown list box, click here.
A disabled dropdown list box is not clickable, no item is selectable.
|
| Figure 2: Disabled dropdown list box |
The dropdown list box does not have a width attribute. Note, that this control takes the width from the widest list box item.
|
| Figure 3: Dropdown list box with a very wide item |
Usage - Disabled State
Set the disabled state if the user is not allowed to change the value of a dropdown list box or if a larger group of input elements including a dropdown list box is disabled.
Example: A set of fields including a dropdown list box is disabled because the user unchecked an option (see figure 4).
|
| Figure 4: Disabled dropdown list box - the fields are disabled because the user checked the Invoice option |
Related Controls
Input Field, Item List, Label, List Box, Radio Button, Tree View