Dual List Selector

Dual List Selector


The Dual List Selector component is used to move items from one list to another.

They are best used when more than 30 items appear in a list, a many to many data model is needed or if there is a specific applicable use case. Lists under 30 items should consider using the Bootstrap Multiple Select widget.

This design is recommended for desktop or tablet applications where the lists remain side by side.

Use Cases

Any situation where the user is required to move an item or items from one list to another. Lists are displayed side by side so that all information is presented together. This is best used when items are easily identifiable by name only as other properties are not displayed within the pane.

  • Used for moving items from an inactive to active state or vice versa

  • Used for moving items from an available to a selected state or vice versa

Dual List Selector

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

Default State

Selecting Items

  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

Hover Highlight Selecting Items Select All

  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

Empty State

  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

Empty State

  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.


Default State

  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.

Code icon

PatternFly Core Example Not Available

There is no PatternFly-Core code available for this pattern at this time. Links to the JS framework implementations can be seen above.

Visit the Contributing to PatternFly documentation to learn how to contribute the code.