...

Usage & Behavior

General guidelines

Structure

The drop-down consists of:

• Trigger area. Selecting the drop-down trigger should open or close the options list. Includes:

  • a text area, with the currently-selected option(s) or default text.

  • a drop-down arrow.

• Options list. Displays the list of available values, consisting of:

  • Options. Must include a text label, but can additionally have an icon. Keep the labels short, because the list uses single lines only.

  • Selection indicator. A blue check mark should be shown to the left of the selected option.

  • Icon buttons (optional). These add extra actions for each list option, and appear on hover. A tooltip describing the action should be displayed on hover.

• Preceding label (optional). A label to the left of the trigger area, to inform the user about what is included in the options list.

...

• Users need to select one option exclusively from a short list. (Where the user can select multiple options, see Multi-select drop-down below).

• There should be a minimum of 3 options.

• The user may select an item either by using the mouse and clicking, or by using the Up and Down keys to navigate between options and Enter to select.

• On selection of an option, the options list will close.

• The selected option will be shown in the trigger area.

States

State	Visual	Visual Searchable drop-down	VisualMulti-select drop-down	Visual Multi-select searchable drop-down
Regular
Hover
Active		Image Removed	Image Removed	Image Removed
Selected
Disabled
Error
Warning
Focused, Regular
Focused, Hover
Focused, Active
Focused, Disabled

Interaction

DescriptionInteraction	Visual	Details
Regular stateNone		The Select field always displays either: the current selection, or the hint text Select, or the hint text Select a {NameOfEntity}. See the Default State section above.
Hover
Click the trigger area		Clicking or tapping anywhere on the trigger area opens or closes the options list. Hovered options should be highlighted with a light blue background color. The user may use the Up and Down keys to navigate between options and Enter to select.
Select an itemoption		On selecting an option: the options list closes. the selected option is displayed in the field.
Click anywhere outside of the drop-down		Closes the options list.
View options list with an existing selection		Shows the selected item option with a blue check mark on the left side of the option.

...

• The search field will be auto-focused when the options list opens, so that the user may start searching immediately.

• The search field will operate as a Live Search.

• The user may select an item either by using the mouse and clicking, or by using the Up and Down keys to navigate between options and Enter to select.

• On selection, the options list will close.

• The selected item will be presented in the trigger area.

• The search field is cleared each time the options list is closed.

Interaction

DescriptionInteraction	Visual	Details
Click the trigger area		Clicking or tapping anywhere on the trigger area opens or closes the options list. The search field is focused and so that the user may start typing.
Enter search		As characters are entered, the list is filtered to show relevant matching results only. The filter can match anywhere within the value string (at the beginning, middle, or end). The part of the option label which matches the search string should be shown in bold. The user may use the Up and Down keys to navigate between options and Enter to select.
Select an itemoption		On selecting an option: the options list closes. the selected option is displayed in the field. the search field is cleared.
View options list with an existing selection		Shows the selected item with a blue check mark on the left side of the option.

...

• The user is expected to select all or most of the items.

• The list is very long (so it will allow the user to easily clear all selections).

Interaction

StepInteraction	Visual	DescriptionDetails
Click the trigger area		Clicking or tapping anywhere on the trigger area opens or closes the options list.
Select an itemoption		The options list remains open. The option label is added to the trigger area. The selected item is checked.
Multiple items selected		First, all items are presented one after another, separated by a comma and a space. When the selected items exceed the size of the trigger area, the total number of selections should be presented.
Click on the trigger area, or Click anywhere outside of the control		The options list closes. The selected options are displayed in the trigger area.

...

Multi-select Searchable drop-down

Interaction

StepInteraction	Visual	DescriptionDetails
Click the trigger area		Clicking or tapping anywhere on the trigger area opens or closes the options list. The search field is focused and the user may start typing.
Enter Search		As characters are entered, the list is filtered to show matching results only. The filter can match anywhere within the value string (at the beginning, middle, or end). The part of the option label which matches the search string should be shown in bold. The user may use the Up and Down keys to navigate between options and Enter to select.
Select an itemoption		The option label is added to the trigger area. The options list remains open, so the user can select another item. The selected options are checked.
Delete search string		A search string can be cleared using the X button, or manually by using the delete key. The full options list is presented. The search field is in focus.

Validations and errors

Please refer to the Field validation page for more information.

An example for a A drop-down menu with a warning: 

...

An example for a A drop-down menu with an error: 

...

Best practices

• Use when:

  • The options list is small-medium in size.

  • Space is constrained.

• Use the searchable type when:

  • there are more than 15 options.

  • when users are expected to know what they are looking for, and are likely to be aware of how the option is labelled.

• Don’t use when:

  • The list has fewer than 3 options.

  • The list has fewer than 7 options and the user needs to see them all at once. Use radio buttons or Check boxes instead.

  • The user needs to enter a value which is not in the list. Use a combo box instead.

  • The list is large. Use Dual List Selector or List instead.

• General:

  • Only show a scrollbar when the list has over 8 items.

  • Keep the text values as short as possible, because the list uses single lines only.

  • The option There is no horizontal scrolling in the option list.

  • The options list should adapt its length to the longest entry by default, but values that which are too long may be truncated, with a tooltip displaying the full text (not recommended). The option list may not have a horizontal scroll. 

  • 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.

  • If there’s no preceding label, or if the label is not indicative enough, the {NameOfEntity} should be added within the drop-down, after the number of selections. For example, 2 categories selected:

    

     

...