Versions Compared

Version Old Version 57 New Version Current
Changes made by

Hasitha Jayarathne

Hasitha Jayarathne

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

...

  • 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

Combo Box.png

Error

Warning

Image RemovedCombo Box Warning.pngImage 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 RemovedCombo Box States.pngImage Added

Code 

Html macro
sanitizefalse
<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>

...