See also: Data Tables
Description
A dual list selector allows the user to select multiple items. It is particularly useful when there are a large number of available items.
The most common use of the dual list selector is a column picker, used in Data Tables. For this reason, this document describes the structure and function for a column picker.
 |
Usage & Behavior
General guidelines
The dual list selector appears in a Dialog Box.
It is triggered by clicking the Columns option in the Action Menu.
Structure
The column picker contains two Lists:
Available Columns (on the left). A list of all of the columns available in the table, with a header.
Selected Columns (on the right). A list of the currently displayed columns, with a header.
Move buttons (right and left), shown between the two lists. These allow the user to move items between the columns.
Reorder buttons (up and down), shown underneath the Selected Columns list. These allow the user the reorder the selected items.
Selected items count, shown next to the Selected Columns header. It shows the number of selected items out of the total number of items, for example: 7/22.
(Optional) A Search bar above each list. This allows the user to quickly locate specific items. The search bar is optional, depending on the number of items.
A vertical Scrollbar, used where the list is too long to be displayed in its container.
A Restore Defaults button, shown in the bottom-left corner of the dialog box.
Done and Cancel Dialog Buttons, shown in the bottom-right corner of the dialog box.
Order
The Selected Columns list shows the list of columns in the same order as they appear in the data table.
The Available Columns list is sorted alphanumerically.
States
The Move buttons (left and right) are disabled until the user has selected at least one item: selecting items in the right list enables the left button, and vice versa.
The Reorder buttons (up and down) are disabled until the user has selected at least one item in the Selected Columns list.
Selecting the top item will only enable the down button.
Selecting the bottom item will only enable the up button.
Selecting any other item will enable both the up and down buttons.
If a column contains items which cannot be moved or reordered, they should be shown as disabled when the column is selected.
Interaction
Selecting Items
In either list, clicking an item selects it.
The user can select more than one item using the Ctrl (or Command) key for discrete selection, or the Shift key for a block selection.
Selecting items in one list deselects all items in the other list.
Moving items between lists
The user can move selected items between lists using one of two methods:
clicking the right or left button between the lists.
using Drag and Drop.
Items moved to the Selected Columns list will appear at the bottom of the list.
Items moved to the Available Columns list will appear in their original locations, so the list is always sorted alphanumerically.
Items should remain selected when moved.
Moved items should always be visible. Where the target list is outside of the visible area, the dialog will automatically scroll when the item is moved.
Reordering items
In the Selected Columns list, the user can reorder items by selecting them and then clicking the up and down buttons underneath the list.
Reordering multiple items together will keep their relative locations (i.e. including the gaps between items, where they exist).
Items can also reordered using Drag and Drop. In this case, when reordering multiple items they will be clustered.
After the items are reordered they will remain selected until the user selects other items.
Restoring Defaults
Clicking the Restore Defaults button restores the list to their original states ('factory default').
Locking columns (optional)
The user can lock any column in the Selected Columns list by clicking the pin icon, which is shown on hover. In this case:
the icon toggles from idle to selected.
the item moves to the top of the list.
the item can be ordered only inside the group of locked items.
within the Data Table, locked columns are anchored to the left. Locked items can be reordered only inside the group of locked items.
The user can unlock the column by clicking the pin icon again.
 |
Saving changes
After making changes to the lists, the user can confirm the selection by clicking the Done button.
Changes can be canceled by selecting the Cancel button.
Validation and Errors
Removing All Items
If the user removes all items from the Selected Columns list:
the search bar and reordering buttons will be disabled.
a message will appear inside the container, advising the user to select at least one item.
 |
In this case, clicking the Done button:
shows an error message at the bottom of the dialog.
disables the button.
 |
Limiting the number of items
A limit on the number of items which can be selected is recommended, depending on common usage and system performance.
In this case, the maximum number of items should be shown with the count above the Selected Columns list, regardless of the number of available columns.
If the user reaches the maximum number of items:
the right arrow button will be disabled.
dragging items from the Available Columns list will be disabled.
a relevant message will appear at the bottom of the popup.
 |
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
Code
