Dual List Selector

Dual List Selectors allow users to visually compare available and selected items and move items between those states.

Default State

1. Select All - Selects all items in the list. - When some items are selected, if the user then clicks the Select All button, all items will then be selected. Clicking again will deselect all items.
2. Filter/Search - Type-ahead filter allows you to easily reduce long lists to more quickly find items.
3. Sort (optional): - Default sort will be alphabetical. - Additional sorting options are dependent on the data.
4. Action Menu (optional):
   • Additional actions can be presented in a kabob.
5. Item Movement Buttons - Used to move selected items between the two state panes.
6. Scrolling
   • The panes should have flexible widths and a maximum height.
   • A maximum height limit would be met with a scroll to accommodate additional list items.
   • Both panes should be of equal height.
7. Item Count Labels
   • The bottom of each pane should have a count to the number of items selected out of total items available.
8. Empty State
   • Empty panes should possess an Empty State message to inform users that there are no selections to be made, or no items have been selected.

Selecting and Moving Items

1. Hover Highlight
   • Highlight should exist on hover.
2. Selected Highlight and Checkmark
   • Selected items are highlighted with the checkmark state changed to include checked icon to visually reinforce item selection. This is particularly useful when multiple selections have been made.
3. Moving an Item
   • After an item(s) has been selected, the Shuttle Buttons move the items to the desired state pane.
   • After items are moved they remain highlighted in their new state pane as visual confirmation. They remain highlighted until a new selection is made. This is so item movement can be easily undone.
   • If no known sort methodology is determined, items will added to the bottom of the list.
4. Selecting within Both Panes
   • The panes participate in mutually exclusive interaction. Only the items in one state pane may be selected at any give time. All checkboxes are active until a selection is made within one pane. Checkboxes should be disabled for the non active pane.

Bulk Moving

1. Select All
   • When Select All is clicked, all items are highlighted following the above highlight and move rules.
   • Clicking the box again will deselect all.

Empty State on Selection Pane

1. Initial Pane is Empty
   • When all items are selected and removed from the first state pane an Empty State message should be shown letting the users know there are no other items available for selection.

Nesting

1. Parent and Child Selections
   • Parent items contain checkboxes that will select all child items underneath that parent.
   • Child components contain check boxes to allow their individual selection.
   • Clicking the arrow moves it to the corresponding pane.

• View Angular PatternFly Example
• View PatternFly NG Example
• View PatternFly React Example