...
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 Canceldialog buttons.
Ordering
The Selected Available Columns list is sorted alphanumerically.
The Chosen 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.
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
Code
...