Table of Contents | ||||
---|---|---|---|---|
|
...
Type | Usage |
---|---|
Textual dropdown Menu | |
Multi selection dropdown menu | |
Search/filter dropdown menu |
...
Usage & Behavior
General guidelines
Text
A drop down menu can have a preceding label, or not (see example below).
...
The label should be clear and short (limited to a single line).
Internal Logic
Users need to select one item exclusively from a short list of options (minimum 3 items, maximum - y).
...
Once the user selects an option, the list box closes and the selected option is displayed in the field.
Hovered items are highlighted with a light blue background color.
Selected items have a blue V sign on the left side of the value as shown below
Unlike 'Combo Box', the user cannot enter text in the text box.
Validations and errors
Please refer to Field validation page for more information.
An example for a drop down menu with a warning:
...
- The drop down should be used when the list of available values is long and space is constrained.
- Only a list with over 15 items should show a scrollbar.
- When there are less than 7 options and the user needs to see them all at once → use radio buttons.
- When the user needs to enter a value which is not in the list → use a combo box.
- Keep the text values as short as possible because the list uses single lines only.
- The option list should adapt its length to the longest entry by default, but values that are too long may be truncated with a tooltip displaying their full text (not recommended) - There is no horizontal scrolling in the option list.
- Place options that represent All or None at the beginning of the list, regardless of the sort order of the remaining items.
- Do not allow the control to auto-adjust based on the selection.
...