Dual list selector

Basic

Basic with tooltips

Basic with search

Using more complex options with actions

With tree

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:

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

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

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

Composable dual list selector with 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.

Composable dual list selector with tree