- React
- React deprecated

## Examples

### Basic

### Basic with tooltips

### Basic with search

### Using more complex options with actions

### With tree

## Composable structure

The dual list selector can also be 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>

### Composable dual list selector

### Composable with drag and drop

Note: There is a new recommended drag and drop implementation with full keyboard functionality, which replaces this implementation. To adhere to our new recommendations, refer to the drag and drop demos.

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.

Keyboard and screen reader accessibility for the `<DragDrop>` component is still in development.

### Composable with tree

##
CSS variables