Versions Compared

Version Old Version 71 New Version 72
Changes made by

Carlie Bradshaw

Shani Laendler

Saved on

Key

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

...

Usage & Behavior

The drop-down consists of:

  • Select trigger. Selecting the closed drop-down field should open the options list.

  • Options list. Displays the list of available values. Each option:

    • must have a short text label

    • can also have an associated icon

  • (Optional) Action icons can add extra functionality for each option when hovered. These icons should display a tooltip describing the action on hover.

  • Selection indicator. Where an option has already been selected, it should be shown in the options list with a blue check mark on the left side.

...

  • 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 drop-down menu can (optionally) have a preceding label. Labels inform the user about what is included in the drop-downoptions list.

...

Order the options using one of these rules:

...

Description

Visual

Regular state

The Select field always displays either

  • the current selection,

  • the hint text “Select”,

  • the hint text “Select a {NameOfEntity}”.

See the Default State section above.

Hover

Click a closed drop-down

  • Clicking or tapping anywhere on the drop-down field should open the options list.

  • Hovered options should be highlighted with a light blue background color.

  • The user may use the ‘Up' and 'Down’ arrows Up and Down keys to navigate between items, options and click ‘Enter’ Enter to select.

Select an item

On selecting an option:

  • the options list closes.

  • the selected option is displayed in the field.

Click a drop-down with an existing selection

  • Opens the option list.

  • Shows the selected item with a blue check mark on the left side of the option.

...

Description

Visual

Click a closed drop-down

  • Clicking or tapping anywhere on the drop-down field opens 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 relevant results only.

  • The filter can match anywhere within the value string (at the beginning, middle, or end).

  • The user may use the ‘Up' and 'Down’ arrows Up and Down keys to navigate between items, options and click ‘Enter’ Enter to select.

Select an item

On selecting an option:

  • the options list closes.

  • the selected option is displayed in the field.

Click a drop-down with an existing selection

  • Opens the option list.

  • The search field is focused and the user may start typing.

  • Shows the selected item with a blue check mark on the left side of the option.

...

Step

Visual

Description

Click a closed drop-down

  • Clicking or tapping anywhere on the drop-down field opens 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 relevant matching results only.

  • The filter can match anywhere within the value string (at the beginning, middle, or end).

  • The user may use the ‘Up' and 'Down’ arrows Up and Down keys to navigate between items, options and click ‘Enter’ Enter to select.

Select an item

  • The option name is added to the select trigger area.

  • The options list remains open, so the user can select another item.

  • Search can be cleared to view the full options list.

  • The selected items are checked.

Delete search string

  • A search string can be cleared using the “x” button, or manually by using the delete key.

  • The full list is presented.

  • The search field is in focus.

Please refer to Field validation page for more information.

An example for a drop-down menu 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 or Check boxes instead.

    • The user needs to enter a value which is not in the list. Use a combo box 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.

    • The option list should adapt its length to the longest entry by default, but values that are too long may be truncated, with a tooltip displaying the full text (not recommended). The option list may not have a horizontal scroll.

    • 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 label, or if the label is not indicative enough, the selected item type should be added within the drop-down, after the number of selections:

      Image RemovedImage Added

       

Accessibility Compliance

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

Design

Zeplin Link

Screen Thumbnail

 https://zpl.io/bWOjejb

...

Code

Html macro
sanitizefalse
<link rel="stylesheet" href="https://ux.verint.com/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/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">

<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" 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" 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" 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" 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">Menu</button>
							<div class="dropdown-menu dropdown-menu-sm">
								<a class="dropdown-item" href="#">First Option</a> <a class="dropdown-item" 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">Menu</button>
<div class="dropdown-menu dropdown-menu-sm">
	<a class="dropdown-item" href="#">First Option</a>
	<a class="dropdown-item" 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>

...