Dual list selector

Basic

Basic with tooltips

Basic with search

Using more complex options with actions

Expandable options

Composable dual list selector

For more flexibility, a Dual list selector can be built using sub components. When doing so, the intended component relationships are arranged as follows:

import React from 'react';
import { DualListSelector, DualListSelectorPane, DualListSelectorList, DualListSelectorListItem, DualListSelectorControlsWrapper, DualListSelectorControl } from '@patternfly/react-core';

<DualListSelector>

  <DualListSelectorPane>
    <DualListSelectorList>
      <DualListSelectorListItem/>
    </DualListSelectorList>
  </DualListSelectorPane>
  
  <DualListSelectorControlsWrapper>
    <DualListSelectorControl/> {/* The standard Dual list selector has 4 controls */}
  </DualListSelectorControlsWrapper>
  
  <DualListSelectorPane isChosen>
    <DualListSelectorList>
      <DualListSelectorListItem/>
    </DualListSelectorList>
  </DualListSelectorPane>
  
</DualListSelector>

Note: Keyboard accessibility and screen reader accessibility for the DragDrop component are still in development.

Reordering lists using drag and drop

To make a pane able to be reordered:

• wrap the DualListSelectorPane in a DragDrop component
• wrap the DualListSelectorList in a Droppable component
• wrap the DualListSelectorListItem components in a Draggable component
• define an onDrop callback which reorders the sortable options.
  • The onDrop function provides the starting location and destination location for a dragged item. It should return true to enable the 'drop' animation in the new location and false to enable the 'drop' animation back to the item's old position.
  • define an onDrag callback which ensures that the drag event will not cross hairs with the onOptionSelect click event set on the option. Note: the ignoreNextOptionSelect state value is used to prevent selection while dragging.

Composable dual list selector tree