Table of Contents

Description

...

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

...

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

...

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:

...

Zeplin Link	Thumbnail
https://zpl.io/amp1y3V	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">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 56	New Version Current
Changes made by	Carlie Bradshaw	Hasitha Jayarathne
Saved on	Nov 02, 2023	Dec 20, 2024

Content Comparison

Versions Compared

Key

Description

Content

Internal Logic

Validation & Errors

Code