See also: Data Tables
Description
A dual list selector is a pattern allowing users to select multiple items from a predefined list. It is especially useful when there is 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 within a workspace or a dialog.
In data tables, it is triggered by clicking the Columns option in the action menu.
Structure
The column picker contains:
Two Checkbox lists:
Available Columns on the left.
Chosen Columns on the right.
At the top of each list:
A search bar above each list (optional). This allows the user to quickly locate specific items.
A list checkbox, allowing users to select / deselect all the items on that list.
If only some of the items are selected, the list checkbox will show a “partially selected” state (see Checkbox).A textual indicator, showing the number of existing items and the number of selected items, where relevant.
Between the two lists - two move buttons (right and left), allowing users to move items between lists.
At the bottom of the Chosen Columns list - two reorder buttons (up and down), allowing users the reorder the chosen items.
Next to the Chosen Column title - An Up to [X] indicator, showing the maximum number of allowed items (if it was set).
A vertical scrollbar, used where the list is too long to be displayed in its container.
At the bottom of the area / dialog:
On the left - a Restore defaults button (optional).
On the right - Apply and Cancel dialog buttons.
Ordering
The Selected Columns list shows items in the same order as they appear in the data table.
The Chosen 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 on the left list enables the right button, and vice versa.
The Reorder buttons (up and down) are disabled until the user has selected at least one item in the Chosen 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 buttons.
If a column cannot be moved or reordered, its checkbox should be disabled.
Grouping
Instead of a checkbox list, the Available Columns area can display a multiple selection tree list, allowing the user to quickly select and choose groups of items.
In this case, an icon button will appear next to the list checkbox, allowing users to collapse and expand the list.
Interaction
Selecting Items
On either list, checking an item selects it.
Some items on the Chosen Columns list may be defined as fixes, so users cannot select them.
The user can select all items on a list by checking the list checkbox.
Selecting items on one list deselects all items on the other list.
Moving items between lists
User can move selected items between lists using one of these methods:
clicking the right or left button between the lists.
using drag and drop.
Items moved to the Chosen Columns list will appear at the bottom of the list.
Items moved to the Available Columns list will appear back in their original locations, so the list is always sorted alphanumerically.
Items will remain selected after they were moved.
Moved items should always be visible. Whenever the target list is outside of the visible area, the list will scroll automatically.
Ordering items
In the Chosen Columns list, the user can reorder items by selecting them and then clicking the up and down buttons underneath the list.
Reordering multiple items will keep their relative locations (i.e. including the gaps between items, where they exist).
Items can also be 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 or deselects the list list checkbox.
Restoring Defaults
Clicking the Restore Defaults button restores both lists to their original state ('factory default').
Pinning columns (optional)
Where defined, users can pin any column on the Chosen Columns list by clicking the pin icon, which is shown on hover. In this case:
The icon toggles between pinned and unpinned states.
The item moves to the top of the list.
The item can be ordered only inside the group of pinned items.
On a data table, pinned columns are anchored to the left. Pinned columns can be reordered only inside the group of pinned columns.
The user can unpin the item by clicking the pin icon again.
Validation and Errors
No items on the chosen columns list
If the user removes all items from the Chosen Columns list:
the search bar, reordering buttons and Apply button are disabled,
a message appears within the chosen columns area, advising the user to select at least one item.
Exceeding the maximum number of columns
Users can move any number of available items to the Chosen Columns list, but if the number of items in that list exceeds the maximum number:
The apply button is disabled.
An error message appears at the bottom of the popup.
In this case, removing items so their number is equal or below the maximum reverts to the regular state.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
Code
