1

The Select field displays a hint text

2

In hover: the cursor changes to text cursor

3

Click (anywhere in the dropdown area): 

• The list is displayed, with checkboxes near each option

• The search field is in focus and the user may start typing

• Hovered items are highlighted with a light blue background color

4

Search- the user starts typing a search string:

• The list is filtered to show relevant results only

• The first item is marked for quick selection (the user may use the ‘Up' and 'Down’ arrows to navigate between items, or click ‘Enter’ to select)

Select an item-

• A chiclet is being created (the chiclet may be removed by either clicking the “x” or unchecking the checkbox)

• The item’s checkbox is checked

• The flickering insertion point moves to the “next item” and the user may start searching for the next word

Search and select a second item:

• With a new search the list is filtered again to show relevant results only

• Upon selection a new chiclet is added and the list is refreshed again to allow a new search

• When there’s enough real-estate, the field may expand vertically or horizontally to show more chiclets

5

Once the user clicks anywhere outside the box, the list box closes and the selected options are displayed in the field

If the field is too short to show all chiclets, only the first chiclets will be presented. All selections will be visible:

• In a tooltip

• In focusing on the dropdown again

Clicking anywhere in the dropdown will reopen it (other than clicking the “x”, which will delete the specific chiclet)

6

Clicking the dropdown with an existing selection:

• Opens the full list

• The flickering insertion point is presented to the right of the chiclets to allow quick search (if there are many chiclets, the field will scroll horizontally to show the insertion point).

• All selected items are presented at the top area, under a label ‘Selected’, where the amount of selections is presented in parenthesis.

  • 'Clear all' allows to clear all selections at once

• All other items are presented under a label ‘All other item’. they will not include the selected items.