## Examples

### Basic


import DualListSelectorBasic from "./DualListSelectorBasic.tsx?raw"

<LiveExample src={DualListSelectorBasic} />

### Basic with tooltips


import DualListSelectorBasicTooltips from "./DualListSelectorBasicTooltips.tsx?raw"

<LiveExample src={DualListSelectorBasicTooltips} />

### Basic with search


import DualListSelectorBasicSearch from "./DualListSelectorBasicSearch.tsx?raw"

<LiveExample src={DualListSelectorBasicSearch} />

### Using more complex options with actions


import DualListSelectorComplexOptionsActions from "./DualListSelectorComplexOptionsActions.tsx?raw"

<LiveExample src={DualListSelectorComplexOptionsActions} />

### With tree


import DualListSelectorTreeExample from "./DualListSelectorTreeExample.tsx?raw"

<LiveExample src={DualListSelectorTreeExample} />

## 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


import DualListSelectorComposable from "./DualListSelectorComposable.tsx?raw"

<LiveExample src={DualListSelectorComposable} />

### 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](/components/drag-and-drop/react-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.

```ts isDeprecated file="DualListSelectorComposableDragDrop.tsx"

```

### Composable with tree


import DualListSelectorComposableTree from "./DualListSelectorComposableTree.tsx?raw"

<LiveExample src={DualListSelectorComposableTree} />