Table of Contents

Usage & Behavior

General guidelines

Structure

The drop-down consists of:

...

State	Visual
Regular
Hover
Active
Selected
Disabled
Read-Only
Error
Warning	Image RemovedImage Added
Focused
Focused, Hover
Focused, Active
Focused, Disabled

...

Interaction	Visual	Details
Hovering anywhere on the trigger area		Switches to hover state.
Clicking 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.
Selecting an option		The options list closes. The selected option is displayed in the field.
Viewing options list with an existing selection		Shows the selected option with a blue check mark on the left side of the option.
Selecting a No selection option		The option list closes. No Selection will be set as default unless instructed otherwise
Clicking anywhere outside the drop-down		Closes the options list.
Focusing or hovering on a list option when its row contains action and status icons		Actions are revealed. Aria label will announce the action and status icons on the left and on the right (for screen reader purposes).
Focusing or hovering over an action or status icon		Shows a tooltip describing the action or status.

Searchable drop-down

A Search field should be added:

to options lists with over 15 items.
when users are likely to know what they are looking for.

...

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.

...

The All option is a master type checkbox, which controls the state of all the other checkboxes in the list. See Checkbox for the full behaviour.
The All option should be presented at the top of the options list.
When all items are selected, the trigger area should show All instead of a number.

...

Interaction	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 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 option		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.

A drop-down with a warning:

...

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 /wiki/spaces/UX/pages/299860272 or Checkboxes instead.
- The user needs to enter a value which is not in the list → use a Combo Box /wiki/spaces/UX/pages/299860272 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.
- There is no horizontal scrolling in the option list.
- The options list should adapt its length to the longest entry by default, but values which are too long may be truncated, with a tooltip displaying the full text (not recommended).
- 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:

...

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

If a search bar exists, it will be treated as the first item on the options list.

Keyboard	Trigger area	Options list

Tab	Navigates to the next component.	Regular (single-select) - N/A Multi-select - N/A In case of a search bar - moves focus from search bar to the first list item.
Shift + Tab	Navigates to the previous component.	Regular (single-select) - N/A Multi-select - N/A In case of a search bar - moves focus from list item to the search bar.
Space	Opens the menu.	Regular (single-select) - Selects the focused item and closes the menu. Multi-select - Selects the focused item. Menu stays open. In case of a search bar - Acts as text input.
Enter	Opens the menu.	Regular (single-select) - Selects the focused item and closes the menu. Multi-select - Selects the focused item. Menu stays open. In case of a search bar - Acts as text input.
Esc	N/A	Closes the menu without updating the selection.
Arrows	Up/Down - Opens the menu.	Up - Navigates to the previous item. Stops at the first item in the list. Down - Navigates to the next item. Stops at the last item in the list. Left and right - In case there are status icons/actions in the option row - will navigate to the icon/action (movement will not be circular). In case of a search bar - The right and left arrows act as arrows within a Text Field. Holding down the key will scroll continuously.
Page Up/Home	N/A	Navigates to the first item.
Page Down/End	N/A	Navigates to the last item.

...

Zeplin Link	Screen Thumbnail
https://zpl.io/bWOjejb	Image RemovedImage Added

Code

Html macro

sanitize	false

<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/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/bootstrap-tooltip-custom-class.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">

<script>
$(function () {
		  $('[data-toggle="tooltip"], [data-toggle-second="tooltip"]').tooltip({trigger: 'hover', delay: { "show": 100, "hide": 0 }});
		  
		  $('.is-invalid, .is-warning').on('shown.bs.tooltip', function () {
			  var x = $(this).offset().left + $(this).width();
			  var y = $(this).offset().top;
			  
			  $('.bs-tooltip-right').css('transform', 'translate3d('+x+'px, '+y+'px, 0px)');
		  });
		});
</script>

<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 selected" 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 selected" 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 selected" 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 selected" 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" data-toggle-second="tooltip" data-custom-class="input-error" data-placement="right" title="There is an Error on the Menu Button">Menu</button>
							<div class="dropdown-menu dropdown-menu-sm">
								<a class="dropdown-item" href="#">First Option</a> <a class="dropdown-item selected" 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"  data-toggle-second="tooltip" data-custom-class="input-error" data-placement="right" title="There is an Error on the Menu Button">Menu</button>
<div class="dropdown-menu dropdown-menu-sm">
	<a class="dropdown-item" href="#">First Option</a>
	<a class="dropdown-item selected" 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">Warning</label>
						<div class="col-lg-4">
							<button class="btn btn-outline-light btn-sm btn-fixed-width dropdown-toggle menu-dropdown-toggle is-warning" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-toggle-second="tooltip" data-custom-class="input-warning" data-placement="right" title="There is a Warning on the Menu Button">Menu</button>
							<div class="dropdown-menu dropdown-menu-sm">
								<a class="dropdown-item" href="#">First Option</a> <a class="dropdown-item selected" 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-warning" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"  data-toggle-second="tooltip" data-custom-class="input-warning" data-placement="right" title="There is a Warning on the Menu Button">Menu</button>
<div class="dropdown-menu dropdown-menu-sm">
	<a class="dropdown-item" href="#">First Option</a>
	<a class="dropdown-item selected" 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 112	New Version Current
Changes made by	Asaf Ben-Oved	Hasitha Jayarathne
Saved on	Jul 15, 2024	Dec 23, 2024

Content Comparison

Versions Compared

Key