DualListSelector.md

id	section	cssPrefix	propComponents	beta
Dual list selector	components	pf-v5-c-dual-list-selector	DualListSelector DualListSelectorPane DualListSelectorList DualListSelectorListItem DualListSelectorControlsWrapper DualListSelectorControl DualListSelectorTree DualListSelectorTreeItemData	true

import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon'; import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon'; import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon'; import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';

Examples

The dual list selector is built in a composable manner to make customization easier. The standard sub-component relationships are arranged as follows:

<DualListSelector>
  <DualListSelectorPane>
    <DualListSelectorList>
      <DualListSelectorListItem />
    </DualListSelectorList>
  </DualListSelectorPane>

  <DualListSelectorControlsWrapper>
    <DualListSelectorControl /> /* A standard Dual list selector has 4 controls */
  </DualListSelectorControlsWrapper>

  <DualListSelectorPane isChosen>
    <DualListSelectorList>
      <DualListSelectorListItem />
    </DualListSelectorList>
  </DualListSelectorPane>
</DualListSelector>

Basic

Basic with tooltips

Basic with search

Using more complex options with actions

With tree

Drag and drop

This example only allows reordering the contents of the "chosen" pane with 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.

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