Versions Compared

Version Old Version 101 New Version Current
Changes made by

Carlie Bradshaw

Hasitha Jayarathne

Saved on

Key

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

Description

...

It allows users to select one or multiple values from a list of predefined values. An optional search field can help the user to find values easily.

Image ModifiedImage Modified

Types

Type

Usage

Image

Regular drop-down

When the user can only select one option from a predefined list.

When there are fewer than 15 options.

Image Modified

Searchable drop-down

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.

Image Modified

Multi-select drop-down

When the user can select multiple values from a predefined list

Image Modified

Multi-select searchable drop-down

Image Modified

Usage & Behavior

The drop-down consists of:

...

  • Options - must include a text label, but can additionally have an icon. Keep the labels short, because the list uses single lines only.

  • In case selecting an option is not mandatory, a No selection item should appear at the top of the options list. This will allow users to avoid selection or deselect a previously selected option.

  • Selection indicator - a blue check mark should be shown to the left of the selected option.

  • Action icons (optional) - these add extra actions for each list option, and appear on hover. A tooltip describing the action should be displayed on hoveruser interaction.

  • Status icons (optional) - these add extra information for each list option and always appear.

  • Dividers or group headers may also be used to organise the options list.

Text labels only

Image Modified
Text labels with

Including a No selection option

Image Modified
Text labels and Image Removed

With icons

Image Modified

Action icons
Selection indicator

With additional actions and group divider

Image Added

With group headers

Image Added

The drop-down trigger area consists of a text box showing the default option, if one exists. For example:

...

  • Order the options list using one of these rules:

    • Logical. Sort options into a meaningful order. For example, group related options together, and order by the most common to least common.

    • Alphabetical. If there are more than 8 options available, sort them alphabetically. This helps the user to find the right option quickly. Sort currencies, names, and similar content alphabetically.

    • Numeric. Sort numeric values in a sequential order, with the lowest number first.

    • Chronological. Sort time-related information into chronological order, with the most recent first.

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

  • Users need to select one option exclusively from a short list (where the user can select multiple options, see Multi-select drop-down below).

  • There should be a minimum of 3 options.

  • 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 selection of an option, the options list will close.

  • The selected option will be shown in the trigger area.

State

Visual

Regular

Image Modified

Hover

Image Modified

Active

Image Modified

Selected

Image Modified

Disabled

Image Modified

Read-Only

Dropdown Menu.pngImage Added

Error

Image Modified

Warning

Image Removed
Dropdown menu - Warning.pngImage Added

Focused

Image Modified

Focused, Hover

Image Modified

Focused, Active

Image Modified

Focused, Disabled

Image Modified

Click

Interaction

Visual

Details

Hover

Image Removed

Hovering anywhere on the trigger area

Image Removed
Image Added

  • Switches to hover state.

Clicking

or tapping

anywhere on the trigger area

opens

Image Added

  • Opens or closes the options list.

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

  • The user may use the Up and Down keys to navigate between options and Enter to select.

Select

Selecting an option

Image Modified

  • The options list closes.

  • The selected option is displayed in the field.

Select the

Viewing options list with an existing selection

Image Added

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

Selecting a No selection option

Image Modified

  • The option list closes.

  • Select is displayed in the field.

    • Click anywhere outside of

    • No Selection will be set as default unless instructed otherwise

    Clicking anywhere outside the drop-down

    		Image Modified

    • Closes the options list

    .

    View options list with an existing selection

    Image Removed

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

    Image Removed

    • .

    Focusing or hovering on a list option when its row contains action and status icons

    		image-20240408-120341.pngImage Added

    • Actions are revealed.

    • Aria label will announce the action and status icons on the left
and on the right (for screen reader purposes).

    Focusing or hovering over an action or status icon

    image-20240408-120428.pngImage Added

    • Shows a tooltip describing the action or status.

    A Search field should be added:

    ...

    • The search field will be auto-focused when the options list opens, so that the user may start searching immediately.

    • The search field will operate as a Live Search.

    • 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 selection, the options list will close.

    • The selected item will be presented in the trigger area.

    • The search field is cleared each time the options list is closed.

    Interaction

    Visual

    Details

    Click the trigger area

    		Image Modified

    • Clicking or tapping anywhere on the trigger area opens or closes the options list.

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

    Enter search

    		Image Modified

    • As characters are entered, the list is filtered to show matching results only.

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

    • The part of the option label which matches the search string should be shown in bold.

    • The user may use the Up and Down keys to navigate between options and Enter to select.

    Select an option

    		Image Modified

    On selecting an option:

    • the options list closes.

    • the selected option is displayed in the field.

    • the search field is cleared.

    View options list with an existing selection

    		Image Modified

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

    A multi-select drop-down allows users to easily select multiple values from a predefined list.

    ...

    • The selected values are presented in the trigger area as read-only.

    • 2 or more items are presented one after the other, separated by a comma and a space.

    • When the selected values exceed the size of the trigger area, the labels will be replaced by the total number of selections, for example “5 selected“.

    • An option can be selected by clicking on the checkbox or the label.

    • When space is limited and/or the user is expected to select several items, a Select All option can be added.

    Select All (optional)

    Image ModifiedImage ModifiedImage Modified

    • The All option is a master type checkbox, which controls the state of all the other checkboxes in the list. See Checkbox for the full behaviour.

    • The All option should be presented at the top of the options list.

    • When all items are selected, the trigger area should show All instead of a number.

    ...

    • The user is expected to select all or most of the items.

    • The list is very long (so it will allow the user to easily clear all selections).

    Interaction

    Visual

    Details

    Click the trigger area

    		Image Modified

    • Clicking or tapping anywhere on the trigger area opens or closes the options list.

    Select an option

    		Image Modified

    • The options list remains open.

    • The option label is added to the trigger area.

    • The selected item is checked.

    Multiple items selected

    		Image ModifiedImage Modified

    • First, all items are presented one after another, separated by a comma and a space.

    • When the selected items exceed the size of the trigger area, the total number of selections should be presented.

    Click on the trigger area, or
    Click anywhere outside of the control

    		Image Modified

    • The options list closes.

    • The selected options are displayed in the trigger area.

    Interaction

    Visual

    Details

    Click the trigger area

    		Image Modified

    • Clicking or tapping anywhere on the trigger area opens or closes the options list.

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

    Enter Search

    		Image Modified

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

    • The part of the option label which matches the search string should be shown in bold.

    • The user may use the Up and Down keys to navigate between options and Enter to select.

    Select an option

    		Image Modified

    • The option label is added to the trigger area.

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

    • The selected options are checked.

    Delete search string

    		Image Modified

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

    • The full options list is presented.

    • The search field is in focus.

    Please refer to the Field Validation page for more information.

    A drop-down 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:

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

      • There is no horizontal scrolling in the option list.

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

      • 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 preceding label, or if the label is not indicative enough, the {NameOfEntity} should be added within the drop-down, after the number of selections. For example, 2 categories selected:

        Image Modified

    Accessibility Compliance

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

    ...

    If a search bar exists, it will be treated as the first item on the options list.

    Keyboard

    Trigger area

    Options list

    		Image ModifiedImage Modified

    Tab

    Navigates to the next component.

    • Regular (single-select) - N/A

    • Multi-select - N/A

    • In case of a search bar - moves focus from search bar to the first list item.

    Shift + Tab

    Navigates to the previous component.

    • Regular (single-select) - N/A

    • Multi-select - N/A

    • In case of a search bar - moves focus from list item to the search bar.

    Space

    Opens the menu.

    • Regular (single-select) - Selects the focused item and closes the menu.

    • Multi-select - Selects the focused item. Menu stays open.

    • In case of a search bar - Acts as text input.

    Enter

    Opens the menu.

    • Regular (single-select) - Selects the focused item and closes the menu.

    • Multi-select - Selects the focused item. Menu stays open.

    • In case of a search bar - Acts as text input.

    Esc

    N/A

    Closes the menu without updating the selection.

    Arrows

    Up/Down - Opens the menu.

    • Up - Navigates to the previous

    action

    • item. Stops at the first item in the list.

    • Down - Navigates to the next

    action

    • item. Stops at the last item in the list.

    • Left and right - In case there are status icons/actions in the option row - will navigate to the icon/action (movement will not be circular).

    • In case of a search bar - The right and left arrows act as arrows within a Text Field.

    Holding down the key will scroll continuously.

    Page Up/Home

    N/A

    Navigates to the first item.

    Page Down/End

    N/A

    Navigates to the last item.

    Design

    Zeplin Link

    Screen Thumbnail

     https://zpl.io/bWOjejb

    Image Removed
    Dropdown Menu - 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">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 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 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 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></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 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 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 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></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" data-toggle-second="tooltip" data-custom-class="input-error" data-placement="right" title="There is an Error on the Menu Button">Menu</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="#">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"  data-toggle-second="tooltip" data-custom-class="input-error" data-placement="right" title="There is an Error on the Menu Button">Menu</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></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">
							<button class="btn btn-outline-light btn-sm btn-fixed-width dropdown-toggle menu-dropdown-toggle is-warning" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-toggle-second="tooltip" data-custom-class="input-warning" data-placement="right" title="There is a Warning on the Menu Button">Menu</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="#">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-warning" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"  data-toggle-second="tooltip" data-custom-class="input-warning" data-placement="right" title="There is a Warning on the Menu Button">Menu</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></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>

    ...