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.
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.
- 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.
- Filter/Search - Type-ahead filter allows you to easily reduce long lists to more quickly find items.
- Sort (optional): - Default sort will be alphabetical. - Additional sorting options are dependent on the data.
- Action Menu (optional):
- Additional actions can be presented in a kabob.
- Item Movement Buttons - Used to move selected items between the two state panes.
- 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.
- Item Count Labels
- The bottom of each pane should have a count to the number of items selected out of total items available.
- 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
- Highlight should exist on hover.
- 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.
- 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.
- 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.
- 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
- 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.
- 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
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.