Table of Contents

Description

Status

colour	Yellow
title	Ongoing

A drop-down menu consists of related content grouped together and organized vertically.

It allows users to search and select a single one or multiple values from a list of predefined values. An optional search field can help the user to find values easily.

Example:

Types

Type	Visual Image
Regular dropdown Menudrop-down
Searchable dropdown drop-down
Multi Select Dropdown-select drop-down
Multi Select searchable Dropdown-select searchable drop-down

Usage & Behavior

General guidelines

...

Structure

A The drop down menu can have a preceding label, or not (see example below).

When exists, the label informs the users what to expect in the options list.

Image Removed

Structure

The drop-down consists of:

...

Select trigger: opens the option list and presents the selected value/s.

...

-down consists of:

Select trigger. Selecting the closed drop-down field should open the options list.
Options list. Displays the list of available values. Each option:
- must have a short text label
- can also have an associated icon
(Optional) Action icons

...

can add extra functionality

...

for each option when hovered.

...

These icons

...

should display a tooltip describing the action

...

Text vs. icons and text

...

on hover.
(Optional) A preceding label can inform the user about the options included in the drop-down.
Selection indicator. Where an option has already been selected, it should be shown in the options list with a blue check mark on the left side.

Text labels

Image Added

Icons and text labels

Action icons

Selection indicator

Order

Choose one of the following styles to order the content:

...

Logical: Sort items into a meaningful order. Group related options together and show the most common options first, followed by less common options.

...

Preceding label

Image Added

Default State

The drop-down consists of a text box showing a default value, if one exists. For example:

...

If not:

Where a preceding label is used, the default text will be "Select".

...

Where there is no label, the default text will be "Select a {NameOfEntity}". For example, "Select a queue".

...

Content

The options should be ordered using one of these patterns:

Logical. Sort options into a meaningful order. For example, group related options together, and order by the most common to least common.
Alphabetical. If there are more than 8 options available, sort them alphabetically. This helps the user to find the right option quickly. Sort currencies, names, and similar content alphabetically.
Numeric:. Sort numeric values into in a sequential order, with the lowest number first.
Chronological:. Sort time-related information into chronological order, with the most recent first.

Default Values

The drop down consists of a text box showing a default value, if exists. For example:

...

If not:

If a label exists, the default text will be "Select".

...

If there is no label, the default text will be "Select a {NameOfEntity}". For example, "Select a queue".

...

Internal Logic

...

recent first.

Internal Logic

Users need to select one option exclusively from a short list.
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, the options list will close.
The selected item will be presented in the select trigger area.

States

State	Visual	Visual- searchable	Visual- multi select	Visual- multi select searchable
Regular
Hover
Active
Selected
Disabled
Error
Warning
Focused, Regular
Focused, Hover
Focused, Active
Focused, Disabled

Interaction

Description	Visual
Regular state		The Select field always displays either the current selection or hint text “select” , the hint text “Select”, the hint text “Select a {NameOfEntity}”. See the Default State section above.
Hover
Click (anywhere in the dropdown area)a closed drop-down		The user clicks or taps the field to display a list of options to choose from. Hovered items are highlighted Clicking or tapping anywhere on the drop-down field should open the options list. Hovered options should be highlighted with a light blue background color. The user may use the ‘Up' and 'Down’ arrows to navigate between items, and click ‘Enter’ to select.
Select an item		Once the user selects On selecting an option, : the options list box closes and . the selected option is displayed in the field.
Clicking Click a dropdown drop-down with an existing selection		Opens the option listSelected items have a blue V sign . Shows the selected item with a blue check mark on the left side of the value option.

Additional Types

...

Searchable drop-down

A search Search field should be added to options list lists with more than over 15 items, and when users are expected likely to know what they are looking for.

Internal Logic

The search field will be auto-focused when clicking the select trigger areathe 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’ Up and ‘down’ Down keys to navigate between items options and ‘Enter’ Enter to selectSelected .
On selection, the options list will close.
The selected item will be presented in the select trigger area and the option list will close trigger area.

Interaction

Description	Visual
Click (anywhere in the dropdown area)a closed drop-down		The list of options is displayedClicking or tapping anywhere on the drop-down field opens the options list. The search field is in focus focused and the user may start typing Search- the user enters a search string typing.
Enter search		The As characters are entered, the list is filtered to show relevant results only. The user may use the ‘Up' and 'Down’ arrows to navigate between items, or and click ‘Enter’ to select.
Selection of Select an item	Once	the user selects On selecting an option, : the options list box closes and . the selected option is displayed in the field.
Clicking Click a dropdown drop-down with an existing selection		Opens the option list. The search field is in focus focused and the user may start typing. Shows the selected item with a blue check mark on the left side of the option.

Multi Select

...

drop-down

A multi selection dropdown drop-down allows users to easily search and select multiple values from a menu predefined list.

Internal Logic

Selected items

The selected items are presented in the select trigger area as read-only.
2 or more items are presented one after the other, separated by a comma.
When the selection of selected items exceeds exceed the size of the containertrigger area, the names labels will be replaced by the total number of selections.
When space is a constraint and/or the user is expected to select many items, a Select All option can be added:

Select All (optional)

...

“All” may is a master type checkbox, which controls the state of all the other checkboxes in the list. See Check Box for the full behaviour).
“All” should be presented at the top of the list, operates as a master type checkbox (see full behaviour on Check Box)options list.
When all items are selected, the select trigger area shows “All”should show “All” instead of a number.

Use the “All” option when:

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

Step	Visual	Description
Click (anywhere in the dropdown area)	Image Removed	Selection of item	Image Removed	The item a closed drop-down	Image Added	Clicking or tapping anywhere on the drop-down field opens the options list.
Select an item	Image Added	The options list remains open. The option name is added to the select trigger area. The selected item is checked and the option list remains open More than 1 item is selected - Regular vs. exceeds the container space .
Multiple items selected		First, all items are presented one after another, separated by a comma. When the amount of items exceeds the container space - the number of selected items is presentedselected items exceed the size of the trigger area, the total number of selections should be presented.
Click on the select trigger area or outside the control		The list box closes and the The selected options are displayed in the field

Multi

...

-select Searchable drop-down

Interaction

Step	Visual	Description
Click (anywhere in the dropdown area)	Image Removed	The list of options is displayed and the search field is in focus	Search- the user enters a search string	Image Removed	Selection of a closed drop-down	Image Added	Clicking or tapping anywhere on the drop-down field opens the options list. The search field is focused and the user may start typing.
Enter Search	Image Added	As characters are entered, the list is filtered to show relevant results only. The user may use the ‘Up' and 'Down’ arrows to navigate between items, and click ‘Enter’ to select.
Select an item		The item option name is being added to the select trigger area. The user may options list remains open, so the user can select another item or clear the search . Search can be cleared to view the full options list	Delete of searched string (manually or by clicking the “x” button)	Image Removed	. The selected items are checked.
Delete search string	Image Added	A search string can be cleared using the “x” button, or manually by using the delete key. The full list is presented. The search field is in focus.

Validations and errors

Please refer to Field validation page for more information.

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

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

Best practices

Use when:
- The options list is small-medium in size and space .
- Space is constrained.
Use the searchable type when:
- there are more than 15 item and the user knows what he’s looking for (and aware, to some extent, how it's named in the option list) 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 less 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 boxboxes 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 with has over 8 items should show a scrollbar.
- 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, having with a tooltip displaying their the full text (not recommended) - There is no horizontal scrolling in the . 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 label, or if the label is not indicative enough, the selected item type should be indicated within the dropdown:
  Image Removed
  added within the drop-down, after the number of selections:
  Image Added

Design

Zeplin Link	Screen Thumbnail
https://zpl.io/bWOjejb

...

New LUX design

Html macro

sanitize	false

<link rel="stylesheet" href="https://ux.verint.com/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">

<div class="card">
    <div class="card-header">Menu Button <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
    <div class="card-body">
				<form>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
						<div class="col-lg-4">
							<button class="btn btn-outline-light btn-sm btn-fixed-width dropdown-toggle menu-dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</button>
							<div class="dropdown-menu dropdown-menu-sm">
								<a class="dropdown-item" href="#">First Option</a> <a class="dropdown-item" href="#">Second Option</a> <a class="dropdown-item" href="#">Third Option</a> <a class="dropdown-item" href="#">Fourth Option</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Fifth Option</a>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-outline-light btn-sm btn-fixed-width dropdown-toggle menu-dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</button>
<div class="dropdown-menu dropdown-menu-sm">
	<a class="dropdown-item" href="#">First Option</a>
	<a class="dropdown-item" href="#">Second Option</a>
	<a class="dropdown-item" href="#">Third Option</a>
	<a class="dropdown-item" href="#">Fourth Option</a>
	<div class="dropdown-divider"></div>
	<a class="dropdown-item" href="#">Fifth Option</a>
</div></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label>
						<div class="col-lg-4">
							<button class="btn btn-outline-light btn-sm btn-fixed-width dropdown-toggle menu-dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled>Menu</button>
							<div class="dropdown-menu dropdown-menu-sm">
								<a class="dropdown-item" href="#">First Option</a> <a class="dropdown-item" href="#">Second Option</a> <a class="dropdown-item" href="#">Third Option</a> <a class="dropdown-item" href="#">Fourth Option</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Fifth Option</a>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-outline-light btn-sm btn-fixed-width dropdown-toggle menu-dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled>Menu</button>
<div class="dropdown-menu dropdown-menu-sm">
	<a class="dropdown-item" href="#">First Option</a>
	<a class="dropdown-item" href="#">Second Option</a>
	<a class="dropdown-item" href="#">Third Option</a>
	<a class="dropdown-item" href="#">Fourth Option</a>
	<div class="dropdown-divider"></div>
	<a class="dropdown-item" href="#">Fifth Option</a>
</div></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Error</label>
						<div class="col-lg-4">
							<button class="btn btn-outline-light btn-sm btn-fixed-width dropdown-toggle menu-dropdown-toggle is-invalid" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</button>
							<div class="dropdown-menu dropdown-menu-sm">
								<a class="dropdown-item" href="#">First Option</a> <a class="dropdown-item" href="#">Second Option</a> <a class="dropdown-item" href="#">Third Option</a> <a class="dropdown-item" href="#">Fourth Option</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Fourth Option</a>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><button class="btn btn-outline-light btn-sm btn-fixed-width dropdown-toggle menu-dropdown-toggle is-invalid" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</button>
<div class="dropdown-menu dropdown-menu-sm">
	<a class="dropdown-item" href="#">First Option</a>
	<a class="dropdown-item" href="#">Second Option</a>
	<a class="dropdown-item" href="#">Third Option</a>
	<a class="dropdown-item" href="#">Fourth Option</a>
	<div class="dropdown-divider"></div>
	<a class="dropdown-item" href="#">Fifth Option</a>
</div></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>

...

Version	Old Version 69	New Version 70
Changes made by	Shani Laendler (Unlicensed)	Carlie Bradshaw
Saved on	Jul 07, 2020	Jul 12, 2020

Content Comparison

Versions Compared

Key

Description

Types

Usage & Behavior

General guidelines

Structure

Structure

Order

Default State

Content

Default Values

Internal Logic

Internal Logic

States

Interaction

Additional Types

Searchable drop-down

Internal Logic

Interaction

Multi Select

drop-down

Internal Logic

Interaction

Multi

-select Searchable drop-down

Interaction

Validations and errors

Best practices

Design

New LUX design