Table of Contents

Description

A combo box is a combination of a Drop-down Menu and Text Field.

With this component the user can either select a predefined option from a list or enter a new one manually using an editable input field.

...

The combo box consists of:

Text Field. Shows the currently-selected option or default text. Users can enter any character to create a new option or filter the predefined list.
Drop-down arrow. This trigger area opens and closes the options list.
Options list. Displays the list of predefined values. Options should have short labels, because the list uses single lines only.
- Selection indicator. A blue check mark should be shown to the left of the selected option.
Preceding label (optional, see below)

...

Where a preceding label is being 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

A combo box can (optionally) have a preceding label (optional). Labels inform the user about what is included in the options list.

...

When the preceding label is not used, the default option should demonstrate the content of the list as much as possible.
Options can be ordered logically, alphabetically, numerically, or chronologically. Refer to the Drop-down Menu page for details.
The width of the options list should adapt to the longest option, up to a maximum width. Where options are too long they should be truncated with a tooltip displaying the full text shown on hover.

Internal Logic

Users need to either:

select one option exclusively from a short list, or
enter a custom value manually.

General logic:

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 On selection of an option, the options list will close. The selected or entered option will be shown in the trigger area.

States

State	Input Field	Drop-down Arrow
Regular	Image Modified
Hover	Image Modified	Image Modified
Active	Image Modified	Image Modified
Disabled	Image Modified
Read-Only	Image Added
Error	Image Modified
Warning

Image Removed

Image Added
Focused	Image Modified
Focused, Hover	Image Modified	Image Modified
Focused, Active	Image Modified	Image Modified
Focused, Disabled	Image Modified

Interaction

...

Interaction

...

Details

...

The
...
The text field is focused so that the user may start typing.
...
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.
Interaction
Details
Click the drop-down arrow
The options list is opened.
The text field is focused so that the user may start typing.
The user may use the Up and Down keys to navigate between options and Enter to select.
A blue check mark should be shown to the left of the selected option, where one exists.
Click the text field
The text field is focused and user can type.
The options list remains closed until characters are entered.
Enter characters in the text field
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).
Select an option
On selecting an option:
the options list closes.
the selected option is displayed in the field.
Click anywhere outside of the combo box
Closes the options list.
Click Escape key
Closes the options list.

Validation & Errors

Please refer to the Field Validation page for more information.

A combo box with a warning:

...

Do not allow the control’s width to auto-adjust based on the selection.
Keep the option labels 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 width to the longest entry by default, but values which are too long may be truncated, with a tooltip displaying the full text (not recommended).

Accessibility compliance

In Focus state:

Typing will initiate the search.
Clicking the down arrow key will open the menu.

...

Accessibility compliance

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

Focus management

In the focus state, typing will initiate filtering.

Keyboard	Text field	Drop-down trigger
	Image Added	Image Added
Tab	Moves the focus to the drop-down trigger.	Navigates to the next component.
Shift + Tab	Navigates to the previous component.	Moves the focus to the text field.
Space	Acts as a space in a Text Field.	Opens the menu.
Enter	Applies the typed text in the Text Field.	Opens the menu.
Esc	N/A	N/A
Arrows	Act as arrows within a Text Field.	Up/Down - Opens the menu.

Mouse	Text field	Drop-down trigger
Right click	Set Focus state on field	Set Regular state on component

Design

Zeplin Link	Thumbnail
https://zpl.io/amp1y3V

Image Removed

Image 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">Combo 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">
							<div class="btn-group">
								<input type="text" class="form-control form-control-combo form-control-sm btn-fixed-width" value="Combo">
								<button type="button" class="btn btn-outline-light btn-sm dropdown-toggle dropdown-toggle-combo" data-toggle="dropdown" data-offset="-120" aria-haspopup="true" aria-expanded="false">
									<span class="sr-only">Toggle Dropdown</span>
								</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>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group">
	<input type="text" class="form-control form-control-combo form-control-sm btn-fixed-width" value="Combo">
	<button type="button" class="btn btn-outline-light btn-sm dropdown-toggle dropdown-toggle-combo" data-toggle="dropdown" data-offset="-120" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle Dropdown</span>
	</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></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">
							<div class="btn-group">
								<input type="text" class="form-control form-control-combo form-control-sm btn-fixed-width" value="Combo" disabled>
								<button type="button" class="btn btn-outline-light btn-sm dropdown-toggle dropdown-toggle-combo" data-toggle="dropdown" data-offset="-120" aria-haspopup="true" aria-expanded="false" disabled>
									<span class="sr-only">Toggle Dropdown</span>
								</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>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group">
	<input type="text" class="form-control form-control-combo form-control-sm btn-fixed-width" value="Combo" disabled>
	<button type="button" class="btn btn-outline-light btn-sm dropdown-toggle dropdown-toggle-combo" data-toggle="dropdown" data-offset="-120" aria-haspopup="true" aria-expanded="false" disabled>
		<span class="sr-only">Toggle Dropdown</span>
	</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></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">
							<div class="btn-group">
								<input type="text" class="form-control form-control-combo form-control-sm btn-fixed-width is-invalid" value="Combo">
								<button type="button" class="btn btn-outline-light btn-sm dropdown-toggle dropdown-toggle-combo is-invalid" data-toggle="dropdown" data-offset="-120" aria-haspopup="true" aria-expanded="false">
									<span class="sr-only">Toggle Dropdown</span>
								</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>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group">
	<input type="text" class="form-control form-control-combo form-control-sm btn-fixed-width is-invalid" value="Combo">
	<button type="button" class="btn btn-outline-light btn-sm dropdown-toggle dropdown-toggle-combo is-invalid" data-toggle="dropdown" data-offset="-120" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle Dropdown</span>
	</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></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">
							<div class="btn-group">
								<input type="text" class="form-control form-control-combo form-control-sm btn-fixed-width is-warning" value="Combo">
								<button type="button" class="btn btn-outline-light btn-sm dropdown-toggle dropdown-toggle-combo is-warning" data-toggle="dropdown" data-offset="-120" aria-haspopup="true" aria-expanded="false">
									<span class="sr-only">Toggle Dropdown</span>
								</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>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group">
	<input type="text" class="form-control form-control-combo form-control-sm btn-fixed-width is-warning" value="Combo">
	<button type="button" class="btn btn-outline-light btn-sm dropdown-toggle dropdown-toggle-combo is-warning" data-toggle="dropdown" data-offset="-120" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle Dropdown</span>
	</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></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>

...

Version	Old Version 51	New Version Current
Changes made by	Carlie Bradshaw	Hasitha Jayarathne
Saved on	Feb 26, 2021	Dec 20, 2024

Interaction	Details
Click the drop-down arrow	The options list is opened. The text field is focused so that the user may start typing. The user may use the Up and Down keys to navigate between options and Enter to select. A blue check mark should be shown to the left of the selected option, where one exists.
Click the text field	The text field is focused and user can type. The options list remains closed until characters are entered.
Enter characters in the text field	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).
Select an option	On selecting an option: the options list closes. the selected option is displayed in the field.
Click anywhere outside of the combo box	Closes the options list.
Click Escape key	Closes the options list.

Content Comparison

Versions Compared

Key

Description

Content

Internal Logic

States

Interaction

Validation & Errors

Accessibility compliance

Accessibility compliance

Focus management

Design

Code