| 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 (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:
...
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 |  | |
Hover |  |  |
Active |  |  |
Disabled |  | |
Read-Only |  | |
Error |  | |
Warning |
 | ||
Focused |  | |
Focused, Hover |  |  |
Focused, Active |  |  |
Focused, Disabled |  |
Interaction
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.
Interaction | Details |
Click the drop-down arrow |
|
Click the text field |
|
Enter characters in the text field |
|
Select an option | On selecting an option:
|
Click anywhere outside of the combo box |
|
Click Escape key |
|
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 the focus state, typing will initiate filtering.
Keyboard | Text field | Drop-down trigger |
| | |
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
Code
| Html macro | ||
|---|---|---|
| ||
<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> |
...