State
How the item looks on the Visible Items list
How the table would look
A mandatory column (always pinned)
When scrolled:
Before pinning the item (the user hovers over the item)
After pinning the item.
See also: Data Tables
Dual list selectors allow users to select multiple items from a predefined list. It is especially useful when there is a large number of available items.
A common use of the dual list selector is as a column picker for Data tables.
The dual list selector includes:
two multiple selection lists:
additional items above each list.
A header, describing the contents of the list.
A Search bar (optional), allowing users to quickly locate specific items.
A master Checkbox, allowing users to select/deselect all of the items in that list.
Counts of the total number of items and the number of selected items in each list.
Next to the Chosen items list header, an Up to [x] indicator showing the maximum number of allowed items (where relevant).
Where a tree list is used for the Available items, a Collapse/Expand All option will appear next to the master checkbox.
two move buttons (right and left) between the two lists, allowing users to move items between the lists.
two reorder buttons (up and down) below the Chosen items list, allowing users to reorder the chosen items.
a vertical Scrollbar for each list, used if it exceeds its container.
Restore defaults button (optional).
The dual list selector may appear within a Form, either in the main workspace or in a dialog popup.
Data table column selectors are commonly triggered via the Action menu.
Some mandatory items may appear in the Chosen items list by default, and cannot be moved. In this case:
These items will appear first on the list
The associated checkbox for a mandatory item will be disabled.
Available items are often sorted alphanumerically.
Chosen items are shown in the order they were added, unless reordered by the user.
It is possible to select items in both lists. After clicking one of the move buttons, selection will be removed from all items in both lists.
The left and right Move buttons are disabled until an item has been selected from the relevant list. Selecting an item in the Available items list enables the right button, and vice versa.
The Reorder buttons are disabled until at least two items are added to the Chosen items list.
The Up button is always disabled when the top item is selected.
The Down button is always disabled when the bottom item is selected.
Items are selected using the checkboxes.
All items in a list can be selected by checking the corresponding master checkbox.
Items can be moved between lists by either:
clicking the right or left move buttons, or
using Drag and drop.
Items moved to the Chosen items list will be added to the bottom of the list.
Items returned to the Available items list will return to their original location.
When items are moved using the move buttons, the Chosen items list should automatically scroll so that the first moved item is at the top of the visible area.
When items are moved using drag and drop, the Chosen items list will scroll according to the Drag and drop guidelines.
Items can be reordered by either:
selecting the items and then clicking the up and down buttons underneath the list.
In this case, when reordering multiple items they will keep their relative locations in the list, each moving up or down one place each.
using Drag and drop.
In this case, when reordering multiple items they will be clustered together, and move as a group.
After items are reordered they will remain selected.
Mandatory items in the Chosen items list cannot be reordered.
Clicking the Restore defaults button will return both lists to their original state.
For table column selectors, items in the Chosen items list may be pinned to the top. This will ensure that these columns are always visible on the table, and remain static when there is horizontal scroll.
State | How the item looks on the Visible Items list | How the table would look |
|---|---|---|
A mandatory column (always pinned) | | When scrolled: |
Before pinning the item (the user hovers over the item) | | |
After pinning the item. | | |
Where defined, users can pin any items within the Chosen items. Within a Data table column selector, pinned items represent columns which are anchored to the left of the table and do not move with horizontal scroll (where it exists).
Mandatory items are always pinned automatically.
Items are pinned by clicking the pin icon, which is shown on hover. The icon toggles between pinned and unpinned states.
When the pin icon is selected, the item will automatically move to the top of the list, beneath the preexisting pinned items.
Pinned items can only be ordered within the pinned items group. Note: mandatory items cannot be moved.
If all items are removed from the Chosen items list:
the search bar, reordering buttons, and Apply button are all disabled.
a message will appear within the Chosen items area, advising the user to select at least one item.
There is no restriction on how many items can be moved to the Chosen items list.
If there is a limit on the number of items which can be applied, and the number of items in the list exceeds this limit:
the Apply button is disabled.
an error message will appear underneath the lists.
Where used as a table column selector:
do not make more than one item mandatory.
do not pin more than three items, as the table will not be usable at narrow screen widths with horizontal scroll.
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Generally the focus will behave as in other Forms.
There is one variation on this behavior: When the focus is on the Chosen items list, and the user moves one or more selected items to the bottom of the list, the focus will move to the Up arrow (9) (instead of to the next focusable element).
If the user moves all the items from the chosen items list back to the available items list, the focus will automatically move from the left move button (5) to the the right move button (4).
Zeplin link | Screen thumbnail |
|---|---|
Happy trailInitial state  Selecting items  After adding items to the chosen list  Edge casesNo items chosen  Maximum items exceeded  OptionalGrouped items 
|
