diff --git a/packages/react-core/src/components/DualListSelector/DualListSelector.tsx b/packages/react-core/src/components/DualListSelector/DualListSelector.tsx
index 99c65d6868c..a8930861cb2 100644
--- a/packages/react-core/src/components/DualListSelector/DualListSelector.tsx
+++ b/packages/react-core/src/components/DualListSelector/DualListSelector.tsx
@@ -190,10 +190,22 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     };
   }
 
+  /** In dev environment, prevents circular structure during JSON stringification when
+   * options passed in to the dual list selector include HTML elements.
+   */
+  replacer = (key: string, value: any) => {
+    if (key[0] === '_') {
+      return undefined;
+    }
+    return value;
+  };
+
   componentDidUpdate() {
     if (
-      JSON.stringify(this.props.availableOptions) !== JSON.stringify(this.state.availableOptions) ||
-      JSON.stringify(this.props.chosenOptions) !== JSON.stringify(this.state.chosenOptions)
+      JSON.stringify(this.props.availableOptions, this.replacer) !==
+        JSON.stringify(this.state.availableOptions, this.replacer) ||
+      JSON.stringify(this.props.chosenOptions, this.replacer) !==
+        JSON.stringify(this.state.chosenOptions, this.replacer)
     ) {
       this.setState({
         availableOptions: [...this.props.availableOptions],
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md b/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md
index 5fd83020a46..bf9efe384f6 100644
--- a/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md
@@ -2,14 +2,15 @@
 id: Dual list selector
 section: components
 cssPrefix: 'pf-c-dual-list-selector'
-propComponents: [
-  'DualListSelector', 
-  'DualListSelectorPane', 
-  'DualListSelectorControl', 
-  'DualListSelectorControlsWrapper', 
-  'DualListSelectorTree',
-  'DualListSelectorTreeItemData'
-]
+propComponents:
+  [
+    'DualListSelector',
+    'DualListSelectorPane',
+    'DualListSelectorControl',
+    'DualListSelectorControlsWrapper',
+    'DualListSelectorTree',
+    'DualListSelectorTreeItemData',
+  ]
 beta: true
 ---
 
@@ -23,806 +24,76 @@ import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pfic
 
 ### Basic
 
-```js
-import React from 'react';
-import { DualListSelector } from '@patternfly/react-core';
-
-class BasicDualListSelector extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      availableOptions: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
-      chosenOptions: []
-    };
-
-    this.onListChange = (newAvailableOptions, newChosenOptions) => {
-      this.setState({
-        availableOptions: newAvailableOptions.sort(),
-        chosenOptions: newChosenOptions.sort()
-      });
-    };
-  }
-
-  render() {
-    return (
-      <DualListSelector
-        availableOptions={this.state.availableOptions}
-        chosenOptions={this.state.chosenOptions}
-        onListChange={this.onListChange}
-        id="basicSelector"
-      />
-    );
-  }
-}
+```ts file="./DualListSelectorBasic.tsx"
 ```
 
 ### Basic with tooltips
 
-```js
-import React from 'react';
-import { DualListSelector } from '@patternfly/react-core';
-
-class BasicDualListSelector extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      availableOptions: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
-      chosenOptions: []
-    };
-
-    this.onListChange = (newAvailableOptions, newChosenOptions) => {
-      this.setState({
-        availableOptions: newAvailableOptions.sort(),
-        chosenOptions: newChosenOptions.sort()
-      });
-    };
-  }
-
-  render() {
-    return (
-      <DualListSelector
-        availableOptions={this.state.availableOptions}
-        chosenOptions={this.state.chosenOptions}
-        onListChange={this.onListChange}
-        addAllTooltip="Add all options"
-        addAllTooltipProps={{ position: 'top' }}
-        addSelectedTooltip="Add selected options"
-        addSelectedTooltipProps={{ position: 'right' }}
-        removeSelectedTooltip="Remove selected options"
-        removeSelectedTooltipProps={{ position: 'left' }}
-        removeAllTooltip="Remove all options"
-        removeAllTooltipProps={{ position: 'bottom' }}
-        id="basicSelector"
-      />
-    );
-  }
-}
+```ts file="./DualListSelectorBasicTooltips.tsx"
 ```
 
 ### Basic with search
 
-```js
-import React from 'react';
-import { DualListSelector } from '@patternfly/react-core';
-
-class BasicDualListSelectorWithSearch extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      availableOptions: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
-      chosenOptions: []
-    };
-
-    this.onListChange = (newAvailableOptions, newChosenOptions) => {
-      this.setState({
-        availableOptions: newAvailableOptions.sort(),
-        chosenOptions: newChosenOptions.sort()
-      });
-    };
-  }
-
-  render() {
-    return (
-      <DualListSelector
-        isSearchable
-        availableOptions={this.state.availableOptions}
-        chosenOptions={this.state.chosenOptions}
-        onListChange={this.onListChange}
-        id="basicSelectorWithSearch"
-      />
-    );
-  }
-}
+```ts file="./DualListSelectorBasicSearch.tsx"
 ```
 
 ### Using more complex options with actions
 
-```js
-import React from 'react';
-import { Button, ButtonVariant, Checkbox, Dropdown, DropdownItem, DualListSelector, KebabToggle } from '@patternfly/react-core';
-import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
-
-class ComplexDualListSelector extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      availableOptions: [<span>Option 1</span>, <span>Option 3</span>, <span>Option 4</span>, <span>Option 2</span>],
-      chosenOptions: [],
-      isAvailableKebabOpen: false,
-      isChosenKebabOpen: false,
-      isDisabled: false
-    };
-
-    this.onSort = panel => {
-      if (panel === 'available') {
-        this.setState(prevState => {
-          const available = prevState.availableOptions.sort((a, b) => {
-            let returnValue = 0;
-            if (a.props.children > b.props.children) returnValue = 1;
-            if (a.props.children < b.props.children) returnValue = -1;
-            return returnValue;
-          });
-          return {
-            availableOptions: available
-          };
-        });
-      }
-
-      if (panel === 'chosen') {
-        this.setState(prevState => {
-          const chosen = prevState.chosenOptions.sort((a, b) => {
-            let returnValue = 0;
-            if (a.props.children > b.props.children) returnValue = 1;
-            if (a.props.children < b.props.children) returnValue = -1;
-            return returnValue;
-          });
-          return {
-            chosenOptions: chosen
-          };
-        });
-      }
-    };
-
-    this.onListChange = (newAvailableOptions, newChosenOptions) => {
-      this.setState({
-        availableOptions: newAvailableOptions,
-        chosenOptions: newChosenOptions
-      });
-    };
-
-    this.onToggle = (isOpen, pane) => {
-      this.setState(prevState => {
-        return {
-          isAvailableKebabOpen: pane === 'available' ? isOpen : prevState.isAvailableKebabOpen,
-          isChosenKebabOpen: pane === 'chosen' ? isOpen : prevState.isChosenKebabOpen
-        };
-      });
-    };
-
-    this.filterOption = (option, input) => {
-      return option.props.children.includes(input);
-    };
-  }
-
-  render() {
-    const dropdownItems = [
-      <DropdownItem key="link">Link</DropdownItem>,
-      <DropdownItem key="action" component="button">
-        Action
-      </DropdownItem>,
-      <DropdownItem key="second action" component="button">
-        Second Action
-      </DropdownItem>
-    ];
-
-    const availableOptionsActions = [
-      <Button
-        variant={ButtonVariant.plain}
-        onClick={() => this.onSort('available')}
-        aria-label="Sort"
-        key="availableSortButton"
-        isDisabled={this.state.isDisabled}
-      >
-        <PficonSortCommonAscIcon />
-      </Button>,
-      <Dropdown
-        toggle={<KebabToggle isDisabled={this.state.isDisabled} onToggle={isOpen => this.onToggle(isOpen, 'available')} id="toggle-id-1" />}
-        isOpen={this.state.isAvailableKebabOpen}
-        isPlain
-        dropdownItems={dropdownItems}
-        key="availableDropdown"
-      />
-    ];
-
-    const chosenOptionsActions = [
-      <Button
-        variant={ButtonVariant.plain}
-        onClick={() => this.onSort('chosen')}
-        aria-label="Sort"
-        key="chosenSortButton"
-        isDisabled={this.state.isDisabled}
-      >
-        <PficonSortCommonAscIcon />
-      </Button>,
-      <Dropdown
-        toggle={<KebabToggle isDisabled={this.state.isDisabled} onToggle={isOpen => this.onToggle(isOpen, 'chosen')} id="toggle-id-2" />}
-        isOpen={this.state.isChosenKebabOpen}
-        isPlain
-        dropdownItems={dropdownItems}
-        key="chosenDropdown"
-      />
-    ];
-
-    return (
-      <React.Fragment>
-          <DualListSelector
-            isSearchable
-            availableOptions={this.state.availableOptions}
-            availableOptionsActions={availableOptionsActions}
-            chosenOptions={this.state.chosenOptions}
-            chosenOptionsActions={chosenOptionsActions}
-            addAll={this.onListChange}
-            removeAll={this.onListChange}
-            addSelected={this.onListChange}
-            removeSelected={this.onListChange}
-            filterOption={this.filterOption}
-            isDisabled={this.state.isDisabled}
-            id="withActions"
-          />
-        <Checkbox
-          key="isDisabled"
-          id="isDisabled"
-          label="isDisabled"
-          aria-label="isDisabled"
-          isChecked={this.state.isDisabled}
-          onChange={() =>
-            this.setState({
-              isDisabled: !this.state.isDisabled
-            })
-          }
-        />
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./DualListSelectorComplexOptionsActions.tsx"
 ```
 
-### Expandable options
-
-```js
-import React from 'react';
-import { DualListSelector } from '@patternfly/react-core';
+### With tree
 
-class TreeDualListSelector extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      chosenOptions: [
-        {
-          id: 'CF1',
-          text: 'Chosen Folder 1',
-          isChecked: false,
-          checkProps: { 'aria-label': 'Chosen Folder 1' },
-          hasBadge: true,
-          badgeProps: { isRead: true },
-          children: [
-            { id: 'CO1', text: 'Chosen Option 1', isChecked: false, checkProps: { 'aria-label': 'Chosen Option 1' } },
-            {
-              id: 'CF1A',
-              text: 'Chosen Folder 1A',
-              isChecked: false,
-              checkProps: { 'aria-label': 'Chosen Folder 1A' },
-              children: [
-                {
-                  id: 'CO2',
-                  text: 'Chosen Option 2',
-                  isChecked: false,
-                  checkProps: { 'aria-label': 'Chosen Option 2' }
-                },
-                {
-                  id: 'CO3',
-                  text: 'Chosen Option 3',
-                  isChecked: false,
-                  checkProps: { 'aria-label': 'Chosen Option 3' }
-                }
-              ]
-            },
-            { id: 'CO4', text: 'Chosen Option 4', isChecked: false, checkProps: { 'aria-label': 'Chosen Option 4' } }
-          ]
-        }
-      ],
-      availableOptions: [
-        {
-          id: 'F1',
-          text: 'Folder 1',
-          isChecked: false,
-          checkProps: { 'aria-label': 'Folder 1' },
-          hasBadge: true,
-          badgeProps: { isRead: true },
-          children: [
-            { id: 'O1', text: 'Option 1', isChecked: false, checkProps: { 'aria-label': 'Option 1' } },
-            {
-              id: 'F1A',
-              text: 'Folder 1A',
-              isChecked: false,
-              checkProps: { 'aria-label': 'Folder 1A' },
-              children: [
-                { id: 'O2', text: 'Option 2', isChecked: false, checkProps: { 'aria-label': 'Option 2' } },
-                { id: 'O3', text: 'Option 3', isChecked: false, checkProps: { 'aria-label': 'Option 3' } }
-              ]
-            },
-            { id: 'O4', text: 'Option 4', isChecked: false, checkProps: { 'aria-label': 'Option 4' } }
-          ]
-        },
-        { id: 'O5', text: 'Option 5', isChecked: false, checkProps: { 'aria-label': 'Option 5' } },
-        {
-          id: 'F2',
-          text: 'Folder 2',
-          isChecked: false,
-          checkProps: { 'aria-label': 'Folder 2' },
-          children: [
-            { id: 'O6', text: 'Option 6', isChecked: false, checkProps: { 'aria-label': 'Option 6' } },
-            { id: 'O7', text: 'Option 5', isChecked: false, checkProps: { 'aria-label': 'Option 5 duplicate' } }
-          ]
-        }
-      ]
-    };
-
-    this.onListChange = (newAvailableOptions, newChosenOptions) => {
-      this.setState({
-        availableOptions: newAvailableOptions,
-        chosenOptions: newChosenOptions
-      });
-    };
-  }
-
-  render() {
-    return (
-      <DualListSelector
-        availableOptions={this.state.availableOptions}
-        chosenOptions={this.state.chosenOptions}
-        onListChange={this.onListChange}
-        id="basicSelector"
-        isSearchable
-        isTree
-      />
-    );
-  }
-}
+```ts file="./DualListSelectorTree.tsx"
 ```
 
 ### 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:
-
-```js noLive
-import React from 'react';
-import { DualListSelector, DualListSelectorPane, DualListSelectorList, DualListSelectorListItem, DualListSelectorControlsWrapper, DualListSelectorControl } from '@patternfly/react-core';
+For more flexibility, a dual list selector can be built using sub components. When doing so, the intended component relationships are arranged as follows:
 
+```noLive
 <DualListSelector>
-
   <DualListSelectorPane>
     <DualListSelectorList>
-      <DualListSelectorListItem/>
+      <DualListSelectorListItem />
     </DualListSelectorList>
   </DualListSelectorPane>
-  
+
   <DualListSelectorControlsWrapper>
-    <DualListSelectorControl/> {/* The standard Dual list selector has 4 controls */}
+    <DualListSelectorControl /> /* The standard Dual list selector has 4 controls */
   </DualListSelectorControlsWrapper>
-  
+
   <DualListSelectorPane isChosen>
     <DualListSelectorList>
-      <DualListSelectorListItem/>
+      <DualListSelectorListItem />
     </DualListSelectorList>
   </DualListSelectorPane>
-  
 </DualListSelector>
 ```
 
-Note: Keyboard accessibility and screen reader accessibility for the `DragDrop` component are still in development.
-
-```js
-import React from 'react';
-import { 
-  Button,
-  ButtonVariant,
-  DualListSelector, 
-  DualListSelectorPane,
-  DualListSelectorList,
-  DualListSelectorListItem,
-  DualListSelectorControlsWrapper,
-  DualListSelectorControl,
-  SearchInput
-} from '@patternfly/react-core';
-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';
-
-const ComposableDualListSelector = () => {
-  const [availableOptions, setAvailableOptions] = React.useState([
-    { text: 'Apple', selected: false, isVisible: true },
-    { text: 'Banana', selected: false, isVisible: true },
-    { text: 'Pineapple', selected: false, isVisible: true },
-    { text: 'Orange', selected: false, isVisible: true },
-    { text: 'Grape', selected: false, isVisible: true },
-    { text: 'Peach', selected: false, isVisible: true },
-    { text: 'Strawberry', selected: false, isVisible: true }
-    ]);
-  const [chosenOptions, setChosenOptions] = React.useState([]);
-  const [availableFilter, setAvailableFilter] = React.useState('');
-  const [chosenFilter, setChosenFilter] = React.useState('');
-
-  // callback for moving selected options between lists
-  const moveSelected = (fromAvailable) => {
-    const sourceOptions = fromAvailable ? availableOptions : chosenOptions;
-    const destinationOptions = fromAvailable ? chosenOptions : availableOptions;
-    for (let i = 0; i < sourceOptions.length; i++) {
-      const option = sourceOptions[i];
-      if (option.selected && option.isVisible) {
-        sourceOptions.splice(i, 1);
-        destinationOptions.push(option);
-        option.selected = false;
-        i--;
-      }
-    }
-    if (fromAvailable) {
-      setAvailableOptions([...sourceOptions]);
-      setChosenOptions([...destinationOptions]);
-    } else {
-      setChosenOptions([...sourceOptions]);
-      setAvailableOptions([...destinationOptions]);
-    }
-  };
-  
-  // callback for moving all options between lists
-  const moveAll = (fromAvailable) => {
-    if (fromAvailable) {
-      setChosenOptions([...availableOptions.filter(x => x.isVisible), ...chosenOptions]);
-      setAvailableOptions([...availableOptions.filter(x => !x.isVisible)]);
-    } else {
-      setAvailableOptions([...chosenOptions.filter(x => x.isVisible), ...availableOptions]);
-      setChosenOptions([...chosenOptions.filter(x => !x.isVisible)]);
-    }
-  };
-  
-  // callback when option is selected
-  const onOptionSelect = (event, index, isChosen) => {
-    if (isChosen) {
-      const newChosen = [...chosenOptions];
-      newChosen[index].selected = !chosenOptions[index].selected;
-      setChosenOptions(newChosen);
-    } else {
-      const newAvailable = [...availableOptions];
-      newAvailable[index].selected = !availableOptions[index].selected;
-      setAvailableOptions(newAvailable);
-    }
-  };
-  
-  // builds a search input - used in each dual list selector pane
-  const buildSearchInput = (isAvailable) => {
-    const onChange = (value) => {
-      isAvailable ? setAvailableFilter(value) : setChosenFilter(value);
-      const toFilter = isAvailable ? [...availableOptions] : [...chosenOptions];
-      toFilter.forEach((option) => {
-        option.isVisible = value === '' || option.text.toLowerCase().includes(value.toLowerCase());
-      })
-    };
-    
-    return (
-      <SearchInput
-        value={isAvailable ? availableFilter : chosenFilter}
-        onChange={onChange}
-        onClear={() => onChange('')}
-      />
-    );
-  };
-  
-  // builds a sort control - passed to both dual list selector panes
-  const buildSort = (isAvailable) => {
-    const onSort = () => {
-      const toSort = isAvailable ? [...availableOptions] : [...chosenOptions];
-      toSort.sort((a,b) => {
-        if (a.text > b.text) return 1;
-        if (a.text < b.text) return -1;
-        return 0;
-      });
-      if (isAvailable) {
-        setAvailableOptions(toSort);
-      } else {
-        setChosenOptions(toSort);
-      }
-    };
-    
-    return (
-      <Button
-        variant={ButtonVariant.plain}
-        onClick={onSort}
-        aria-label="Sort"
-        key="sortButton"
-      >
-        <PficonSortCommonAscIcon />
-      </Button>
-    );
-  };
-
-  return (
-    <DualListSelector>
-      <DualListSelectorPane
-        title="Available"
-        status={`${availableOptions.filter(x => x.selected && x.isVisible).length} of ${availableOptions.filter(x => x.isVisible).length} options selected`}
-        searchInput={buildSearchInput(true)}
-        actions={[buildSort(true)]}
-      >
-        <DualListSelectorList>
-          {availableOptions.map((option, index) => {
-            return option.isVisible ? (
-              <DualListSelectorListItem
-                key={index}
-                isSelected={option.selected}
-                id={`composable-option-${index}`}
-                onOptionSelect={(e) => onOptionSelect(e, index, false)}
-              >
-                {option.text}
-              </DualListSelectorListItem>
-            ) : null;
-          })}
-        </DualListSelectorList>
-      </DualListSelectorPane>
-      <DualListSelectorControlsWrapper
-        aria-label="Selector controls"
-      >
-        <DualListSelectorControl
-          isDisabled={!availableOptions.some(option => option.selected)}
-          onClick={() => moveSelected(true)}
-          aria-label="Add selected"
-          tooltipContent="Add selected"
-        >
-          <AngleRightIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
-          isDisabled={availableOptions.length === 0}
-          onClick={() => moveAll(true)}
-          aria-label="Add all"
-          tooltipContent="Add all"
-        >
-          <AngleDoubleRightIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
-          isDisabled={chosenOptions.length === 0}
-          onClick={() => moveAll(false)}
-          aria-label="Remove all"
-          tooltipContent="Remove all"
-        >
-          <AngleDoubleLeftIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
-          onClick={() => moveSelected(false)}
-          isDisabled={!chosenOptions.some(option => option.selected)}
-          aria-label="Remove selected"
-          tooltipContent="Remove selected"
-        >
-          <AngleLeftIcon />
-        </DualListSelectorControl>
-      </DualListSelectorControlsWrapper>
-      <DualListSelectorPane
-        title="Chosen"
-        status={`${chosenOptions.filter(x => x.selected && x.isVisible).length} of ${chosenOptions.filter(x => x.isVisible).length} options selected`}
-        searchInput={buildSearchInput(false)}
-        actions={[buildSort(false)]}
-        isChosen
-      >
-        <DualListSelectorList>
-          {chosenOptions.map((option, index) => {
-            return option.isVisible ? (
-              <DualListSelectorListItem
-                key={index}
-                isSelected={option.selected}
-                id={`composable-option-${index}`}
-                onOptionSelect={(e) => onOptionSelect(e, index, true)}
-              >
-                {option.text}
-              </DualListSelectorListItem>
-            ) : null;
-          })}
-        </DualListSelectorList>
-      </DualListSelectorPane>
-    </DualListSelector>
-  );
-}
+```ts file="./DualListSelectorComposable.tsx"
 ```
 
-### Reordering lists using drag and drop
+### 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:
 
-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 
+- 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 
+  - 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.
 
-```js
-import React from 'react';
-import { 
-  DragDrop,
-  Droppable,
-  Draggable,
-  DualListSelector, 
-  DualListSelectorPane,
-  DualListSelectorList,
-  DualListSelectorListItem,
-  DualListSelectorControlsWrapper,
-  DualListSelectorControl,
-} from '@patternfly/react-core';
-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';
-
-const ComposableDualListSelector = () => {
-  const [ignoreNextOptionSelect, setIgnoreNextOptionSelect] = React.useState(false);
-  const [availableOptions, setAvailableOptions] = React.useState([
-    { text: 'Apple', selected: false, isVisible: true },
-    { text: 'Banana', selected: false, isVisible: true },
-    { text: 'Pineapple', selected: false, isVisible: true }
-  ]);
-  const [chosenOptions, setChosenOptions] = React.useState([
-    { text: 'Orange', selected: false, isVisible: true },
-    { text: 'Grape', selected: false, isVisible: true },
-    { text: 'Peach', selected: false, isVisible: true },
-    { text: 'Strawberry', selected: false, isVisible: true }
-  ]);
-
-  const moveSelected = (fromAvailable) => {
-    const sourceOptions = fromAvailable ? availableOptions : chosenOptions;
-    const destinationOptions = fromAvailable ? chosenOptions : availableOptions;
-    for (let i = 0; i < sourceOptions.length; i++) {
-      const option = sourceOptions[i];
-      if (option.selected && option.isVisible) {
-        sourceOptions.splice(i, 1);
-        destinationOptions.push(option);
-        option.selected = false;
-        i--;
-      }
-    }
-    if (fromAvailable) {
-      setAvailableOptions([...sourceOptions]);
-      setChosenOptions([...destinationOptions]);
-    } else {
-      setChosenOptions([...sourceOptions]);
-      setAvailableOptions([...destinationOptions]);
-    }
-  };
-  
-  const moveAll = (fromAvailable) => {
-    if (fromAvailable) {
-      setChosenOptions([...availableOptions.filter(x => x.isVisible), ...chosenOptions]);
-      setAvailableOptions([...availableOptions.filter(x => !x.isVisible)]);
-    } else {
-      setAvailableOptions([...chosenOptions.filter(x => x.isVisible), ...availableOptions]);
-      setChosenOptions([...chosenOptions.filter(x => !x.isVisible)]);
-    }
-  };
-  
-  const onOptionSelect = (event, index, isChosen) => {
-    if (ignoreNextOptionSelect) {
-      setIgnoreNextOptionSelect(false);
-      return;
-    }
-    if (isChosen) {
-      const newChosen = [...chosenOptions];
-      newChosen[index].selected = !chosenOptions[index].selected;
-      setChosenOptions(newChosen);
-    } else {
-      const newAvailable = [...availableOptions];
-      newAvailable[index].selected = !availableOptions[index].selected;
-      setAvailableOptions(newAvailable);
-    }
-  };
-  
-  const onDrop = (source, dest) => {
-    if (dest){
-      const newList = [...chosenOptions];
-      const [removed] = newList.splice(source.index, 1);
-      newList.splice(dest.index, 0, removed);
-      setChosenOptions(newList);
-      return true;
-    }
-    return false;
-  };
+Note: Keyboard accessibility and screen reader accessibility for the `DragDrop` component are still in development.
 
-  return (
-    <DualListSelector>
-      <DualListSelectorPane
-        title="Available"
-        status={`${availableOptions.filter(x => x.selected && x.isVisible).length} of ${availableOptions.filter(x => x.isVisible).length} options selected`}
-      >
-        <DualListSelectorList>
-          {availableOptions.map((option, index) => {
-            return option.isVisible ? (
-              <DualListSelectorListItem
-                key={index}
-                isSelected={option.selected}
-                id={`composable-available-option-${index}`}
-                onOptionSelect={(e) => onOptionSelect(e, index, false)}
-              >
-                {option.text}
-              </DualListSelectorListItem>
-            ) : null;
-          })}
-        </DualListSelectorList>
-      </DualListSelectorPane>
-      <DualListSelectorControlsWrapper
-        aria-label="Selector controls"
-      >
-        <DualListSelectorControl
-          isDisabled={!availableOptions.some(option => option.selected)}
-          onClick={() => moveSelected(true)}
-          aria-label="Add selected"
-        >
-          <AngleRightIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
-          isDisabled={availableOptions.length === 0}
-          onClick={() => moveAll(true)}
-          aria-label="Add all"
-        >
-          <AngleDoubleRightIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
-          isDisabled={chosenOptions.length === 0}
-          onClick={() => moveAll(false)}
-          aria-label="Remove all"
-        >
-          <AngleDoubleLeftIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
-          onClick={() => moveSelected(false)}
-          isDisabled={!chosenOptions.some(option => option.selected)}
-          aria-label="Remove selected"
-        >
-          <AngleLeftIcon />
-        </DualListSelectorControl>
-      </DualListSelectorControlsWrapper>
-      <DragDrop onDrag={() => { setIgnoreNextOptionSelect(true); return true; }} onDrop={onDrop}>
-        <DualListSelectorPane
-          title="Chosen"
-          status={`${chosenOptions.filter(x => x.selected && x.isVisible).length} of ${chosenOptions.filter(x => x.isVisible).length} options selected`}
-          isChosen
-        >
-          <Droppable hasNoWrapper>
-            <DualListSelectorList>
-            {chosenOptions.map((option, index) => {
-              return option.isVisible ? (
-                <Draggable key={index} hasNoWrapper>
-                  <DualListSelectorListItem
-                    isSelected={option.selected}
-                    id={`composable-chosen-option-${index}`}
-                    onOptionSelect={(e) => onOptionSelect(e, index, true)}
-                    isDraggable
-                  >
-                    {option.text}
-                  </DualListSelectorListItem>
-                </Draggable>
-              ) : null;
-            })}
-            </DualListSelectorList>
-          </Droppable>
-        </DualListSelectorPane>
-      </DragDrop>
-    </DualListSelector>
-  );
-}
+```ts file="DualListSelectorComposableDragDrop.tsx"
 ```
 
-### Composable dual list selector tree
-```ts file="ComposableTree.tsx"
-```
+### Composable dual list selector with tree
 
+```ts file="DualListSelectorComposableTree.tsx"
+```
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasic.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasic.tsx
new file mode 100644
index 00000000000..6795babc22e
--- /dev/null
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasic.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { DualListSelector } from '@patternfly/react-core';
+
+export const DualListSelectorBasic: React.FunctionComponent = () => {
+  const [availableOptions, setAvailableOptions] = React.useState<React.ReactNode[]>([
+    'Option 1',
+    'Option 2',
+    'Option 3',
+    'Option 4'
+  ]);
+  const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([]);
+
+  const onListChange = (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => {
+    setAvailableOptions(newAvailableOptions.sort());
+    setChosenOptions(newChosenOptions.sort());
+  };
+
+  return (
+    <DualListSelector
+      availableOptions={availableOptions}
+      chosenOptions={chosenOptions}
+      onListChange={onListChange}
+      id="dual-list-selector-basic"
+    />
+  );
+};
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx
new file mode 100644
index 00000000000..c84f84c710d
--- /dev/null
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { DualListSelector } from '@patternfly/react-core';
+
+export const DualListSelectorBasicSearch: React.FunctionComponent = () => {
+  const [availableOptions, setAvailableOptions] = React.useState<React.ReactNode[]>([
+    'Option 1',
+    'Option 2',
+    'Option 3',
+    'Option 4'
+  ]);
+  const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([]);
+
+  const onListChange = (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => {
+    setAvailableOptions(newAvailableOptions.sort());
+    setChosenOptions(newChosenOptions.sort());
+  };
+
+  return (
+    <DualListSelector
+      isSearchable
+      availableOptions={availableOptions}
+      chosenOptions={chosenOptions}
+      onListChange={onListChange}
+      id="dual-list-selector-basic-search"
+    />
+  );
+};
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx
new file mode 100644
index 00000000000..e202656a956
--- /dev/null
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { DualListSelector } from '@patternfly/react-core';
+
+export const DualListSelectorBasicTooltips: React.FunctionComponent = () => {
+  const [availableOptions, setAvailableOptions] = React.useState<React.ReactNode[]>([
+    'Option 1',
+    'Option 2',
+    'Option 3',
+    'Option 4'
+  ]);
+  const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([]);
+
+  const onListChange = (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => {
+    setAvailableOptions(newAvailableOptions.sort());
+    setChosenOptions(newChosenOptions.sort());
+  };
+
+  return (
+    <DualListSelector
+      availableOptions={availableOptions}
+      chosenOptions={chosenOptions}
+      onListChange={onListChange}
+      addAllTooltip="Add all options"
+      addAllTooltipProps={{ position: 'top' }}
+      addSelectedTooltip="Add selected options"
+      addSelectedTooltipProps={{ position: 'right' }}
+      removeSelectedTooltip="Remove selected options"
+      removeSelectedTooltipProps={{ position: 'left' }}
+      removeAllTooltip="Remove all options"
+      removeAllTooltipProps={{ position: 'bottom' }}
+      id="dual-list-selector-basic-tooltips"
+    />
+  );
+};
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
new file mode 100644
index 00000000000..10b0b6a18e8
--- /dev/null
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
@@ -0,0 +1,146 @@
+import React from 'react';
+import {
+  Button,
+  ButtonVariant,
+  Checkbox,
+  Dropdown,
+  DropdownItem,
+  DualListSelector,
+  KebabToggle
+} from '@patternfly/react-core';
+import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
+
+export const DualListSelectorComplexOptionsActions: React.FunctionComponent = () => {
+  const [availableOptions, setAvailableOptions] = React.useState<React.ReactNode[]>([
+    <span key="option1">Option 1</span>,
+    <span key="option3">Option 3</span>,
+    <span key="option4">Option 4</span>,
+    <span key="option2">Option 2</span>
+  ]);
+  const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([]);
+  const [isAvailableKebabOpen, setIsAvailableKebabOpen] = React.useState(false);
+  const [isChosenKebabOpen, setIsChosenKebabOpen] = React.useState(false);
+  const [isDisabled, setIsDisabled] = React.useState(false);
+
+  const onListChange = (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => {
+    setAvailableOptions(newAvailableOptions);
+    setChosenOptions(newChosenOptions);
+  };
+
+  const onSort = (pane: string) => {
+    const toSort = pane === 'available' ? [...availableOptions] : [...chosenOptions];
+    (toSort as React.ReactElement[]).sort((a, b) => {
+      if (a.props.children > b.props.children) {
+        return 1;
+      }
+      if (a.props.children < b.props.children) {
+        return -1;
+      }
+      return 0;
+    });
+
+    if (pane === 'available') {
+      setAvailableOptions(toSort);
+    } else {
+      setChosenOptions(toSort);
+    }
+  };
+
+  const onToggle = (isOpen: boolean, pane: string) => {
+    if (pane === 'available') {
+      setIsAvailableKebabOpen(isOpen);
+    } else {
+      setIsChosenKebabOpen(isOpen);
+    }
+  };
+
+  const filterOption = (option: React.ReactNode, input: string) =>
+    (option as React.ReactElement).props.children.includes(input);
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="secondAction" component="button">
+      Second Action
+    </DropdownItem>
+  ];
+
+  const availableOptionsActions = [
+    <Button
+      variant={ButtonVariant.plain}
+      onClick={() => onSort('available')}
+      aria-label="Sort available options"
+      key="availableSortButton"
+      isDisabled={isDisabled}
+    >
+      <PficonSortCommonAscIcon />
+    </Button>,
+    <Dropdown
+      toggle={
+        <KebabToggle
+          isDisabled={isDisabled}
+          onToggle={isOpen => onToggle(isOpen, 'available')}
+          id="complex-available-toggle"
+        />
+      }
+      isOpen={isAvailableKebabOpen}
+      isPlain
+      dropdownItems={dropdownItems}
+      key="availableDropdown"
+    />
+  ];
+
+  const chosenOptionsActions = [
+    <Button
+      variant={ButtonVariant.plain}
+      onClick={() => onSort('chosen')}
+      aria-label="Sort chosen options"
+      key="chosenSortButton"
+      isDisabled={isDisabled}
+    >
+      <PficonSortCommonAscIcon />
+    </Button>,
+    <Dropdown
+      toggle={
+        <KebabToggle
+          isDisabled={isDisabled}
+          onToggle={isOpen => onToggle(isOpen, 'chosen')}
+          id="complex-chosen-toggle"
+        />
+      }
+      isOpen={isChosenKebabOpen}
+      isPlain
+      dropdownItems={dropdownItems}
+      key="chosenDropdown"
+    />
+  ];
+
+  return (
+    <React.Fragment>
+      <DualListSelector
+        isSearchable
+        availableOptions={availableOptions}
+        availableOptionsActions={availableOptionsActions}
+        chosenOptions={chosenOptions}
+        chosenOptionsActions={chosenOptionsActions}
+        addAll={onListChange}
+        removeAll={onListChange}
+        addSelected={onListChange}
+        removeSelected={onListChange}
+        filterOption={filterOption}
+        isDisabled={isDisabled}
+        id="dual-list-selector-complex"
+      />
+      <Checkbox
+        key="isDisabled"
+        id="isDisabled"
+        label="isDisabled"
+        aria-label="isDisabled"
+        isChecked={isDisabled}
+        onChange={() => setIsDisabled(!isDisabled)}
+      />
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
new file mode 100644
index 00000000000..59d7de18c57
--- /dev/null
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposable.tsx
@@ -0,0 +1,214 @@
+import React from 'react';
+import {
+  Button,
+  ButtonVariant,
+  DualListSelector,
+  DualListSelectorPane,
+  DualListSelectorList,
+  DualListSelectorListItem,
+  DualListSelectorControlsWrapper,
+  DualListSelectorControl,
+  SearchInput
+} from '@patternfly/react-core';
+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';
+
+export const DualListSelectorComposable: React.FunctionComponent = () => {
+  const [availableOptions, setAvailableOptions] = React.useState([
+    { text: 'Apple', selected: false, isVisible: true },
+    { text: 'Banana', selected: false, isVisible: true },
+    { text: 'Pineapple', selected: false, isVisible: true },
+    { text: 'Orange', selected: false, isVisible: true },
+    { text: 'Grape', selected: false, isVisible: true },
+    { text: 'Peach', selected: false, isVisible: true },
+    { text: 'Strawberry', selected: false, isVisible: true }
+  ]);
+  const [chosenOptions, setChosenOptions] = React.useState([]);
+  const [availableFilter, setAvailableFilter] = React.useState('');
+  const [chosenFilter, setChosenFilter] = React.useState('');
+
+  // callback for moving selected options between lists
+  const moveSelected = (fromAvailable: boolean) => {
+    const sourceOptions = fromAvailable ? availableOptions : chosenOptions;
+    const destinationOptions = fromAvailable ? chosenOptions : availableOptions;
+    for (let i = 0; i < sourceOptions.length; i++) {
+      const option = sourceOptions[i];
+      if (option.selected && option.isVisible) {
+        sourceOptions.splice(i, 1);
+        destinationOptions.push(option);
+        option.selected = false;
+        i--;
+      }
+    }
+    if (fromAvailable) {
+      setAvailableOptions([...sourceOptions]);
+      setChosenOptions([...destinationOptions]);
+    } else {
+      setChosenOptions([...sourceOptions]);
+      setAvailableOptions([...destinationOptions]);
+    }
+  };
+
+  // callback for moving all options between lists
+  const moveAll = (fromAvailable: boolean) => {
+    if (fromAvailable) {
+      setChosenOptions([...availableOptions.filter(option => option.isVisible), ...chosenOptions]);
+      setAvailableOptions([...availableOptions.filter(option => !option.isVisible)]);
+    } else {
+      setAvailableOptions([...chosenOptions.filter(option => option.isVisible), ...availableOptions]);
+      setChosenOptions([...chosenOptions.filter(option => !option.isVisible)]);
+    }
+  };
+
+  // callback when option is selected
+  const onOptionSelect = (
+    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
+    index: number,
+    isChosen: boolean
+  ) => {
+    if (isChosen) {
+      const newChosen = [...chosenOptions];
+      newChosen[index].selected = !chosenOptions[index].selected;
+      setChosenOptions(newChosen);
+    } else {
+      const newAvailable = [...availableOptions];
+      newAvailable[index].selected = !availableOptions[index].selected;
+      setAvailableOptions(newAvailable);
+    }
+  };
+
+  // builds a search input - used in each dual list selector pane
+  const buildSearchInput = (isAvailable: boolean) => {
+    const onChange = (value: string) => {
+      isAvailable ? setAvailableFilter(value) : setChosenFilter(value);
+      const toFilter = isAvailable ? [...availableOptions] : [...chosenOptions];
+      toFilter.forEach(option => {
+        option.isVisible = value === '' || option.text.toLowerCase().includes(value.toLowerCase());
+      });
+    };
+
+    return (
+      <SearchInput
+        value={isAvailable ? availableFilter : chosenFilter}
+        onChange={onChange}
+        onClear={() => onChange('')}
+      />
+    );
+  };
+
+  // builds a sort control - passed to both dual list selector panes
+  const buildSort = (isAvailable: boolean) => {
+    const onSort = () => {
+      const toSort = isAvailable ? [...availableOptions] : [...chosenOptions];
+      toSort.sort((a, b) => {
+        if (a.text > b.text) {
+          return 1;
+        }
+        if (a.text < b.text) {
+          return -1;
+        }
+        return 0;
+      });
+      if (isAvailable) {
+        setAvailableOptions(toSort);
+      } else {
+        setChosenOptions(toSort);
+      }
+    };
+
+    return (
+      <Button variant={ButtonVariant.plain} onClick={onSort} aria-label="Sort" key="sortButton">
+        <PficonSortCommonAscIcon />
+      </Button>
+    );
+  };
+
+  return (
+    <DualListSelector>
+      <DualListSelectorPane
+        title="Available"
+        status={`${availableOptions.filter(option => option.selected && option.isVisible).length} of ${
+          availableOptions.filter(option => option.isVisible).length
+        } options selected`}
+        searchInput={buildSearchInput(true)}
+        actions={[buildSort(true)]}
+      >
+        <DualListSelectorList>
+          {availableOptions.map((option, index) =>
+            option.isVisible ? (
+              <DualListSelectorListItem
+                key={index}
+                isSelected={option.selected}
+                id={`composable-available-option-${index}`}
+                onOptionSelect={e => onOptionSelect(e, index, false)}
+              >
+                {option.text}
+              </DualListSelectorListItem>
+            ) : null
+          )}
+        </DualListSelectorList>
+      </DualListSelectorPane>
+      <DualListSelectorControlsWrapper aria-label="Selector controls">
+        <DualListSelectorControl
+          isDisabled={!availableOptions.some(option => option.selected)}
+          onClick={() => moveSelected(true)}
+          aria-label="Add selected"
+          tooltipContent="Add selected"
+        >
+          <AngleRightIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          isDisabled={availableOptions.length === 0}
+          onClick={() => moveAll(true)}
+          aria-label="Add all"
+          tooltipContent="Add all"
+        >
+          <AngleDoubleRightIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          isDisabled={chosenOptions.length === 0}
+          onClick={() => moveAll(false)}
+          aria-label="Remove all"
+          tooltipContent="Remove all"
+        >
+          <AngleDoubleLeftIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          onClick={() => moveSelected(false)}
+          isDisabled={!chosenOptions.some(option => option.selected)}
+          aria-label="Remove selected"
+          tooltipContent="Remove selected"
+        >
+          <AngleLeftIcon />
+        </DualListSelectorControl>
+      </DualListSelectorControlsWrapper>
+      <DualListSelectorPane
+        title="Chosen"
+        status={`${chosenOptions.filter(option => option.selected && option.isVisible).length} of ${
+          chosenOptions.filter(option => option.isVisible).length
+        } options selected`}
+        searchInput={buildSearchInput(false)}
+        actions={[buildSort(false)]}
+        isChosen
+      >
+        <DualListSelectorList>
+          {chosenOptions.map((option, index) =>
+            option.isVisible ? (
+              <DualListSelectorListItem
+                key={index}
+                isSelected={option.selected}
+                id={`composable-chosen-option-${index}`}
+                onOptionSelect={e => onOptionSelect(e, index, true)}
+              >
+                {option.text}
+              </DualListSelectorListItem>
+            ) : null
+          )}
+        </DualListSelectorList>
+      </DualListSelectorPane>
+    </DualListSelector>
+  );
+};
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx
new file mode 100644
index 00000000000..6d251291dbf
--- /dev/null
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx
@@ -0,0 +1,190 @@
+import React from 'react';
+import {
+  DragDrop,
+  Droppable,
+  Draggable,
+  DualListSelector,
+  DualListSelectorPane,
+  DualListSelectorList,
+  DualListSelectorListItem,
+  DualListSelectorControlsWrapper,
+  DualListSelectorControl
+} from '@patternfly/react-core';
+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';
+
+interface SourceType {
+  droppableId: string;
+  index: number;
+}
+
+interface DestinationType extends SourceType {}
+
+export const DualListSelectorComposableDragDrop: React.FunctionComponent = () => {
+  const [ignoreNextOptionSelect, setIgnoreNextOptionSelect] = React.useState(false);
+  const [availableOptions, setAvailableOptions] = React.useState([
+    { text: 'Apple', selected: false, isVisible: true },
+    { text: 'Banana', selected: false, isVisible: true },
+    { text: 'Pineapple', selected: false, isVisible: true }
+  ]);
+  const [chosenOptions, setChosenOptions] = React.useState([
+    { text: 'Orange', selected: false, isVisible: true },
+    { text: 'Grape', selected: false, isVisible: true },
+    { text: 'Peach', selected: false, isVisible: true },
+    { text: 'Strawberry', selected: false, isVisible: true }
+  ]);
+
+  const moveSelected = (fromAvailable: boolean) => {
+    const sourceOptions = fromAvailable ? availableOptions : chosenOptions;
+    const destinationOptions = fromAvailable ? chosenOptions : availableOptions;
+    for (let i = 0; i < sourceOptions.length; i++) {
+      const option = sourceOptions[i];
+      if (option.selected && option.isVisible) {
+        sourceOptions.splice(i, 1);
+        destinationOptions.push(option);
+        option.selected = false;
+        i--;
+      }
+    }
+    if (fromAvailable) {
+      setAvailableOptions([...sourceOptions]);
+      setChosenOptions([...destinationOptions]);
+    } else {
+      setChosenOptions([...sourceOptions]);
+      setAvailableOptions([...destinationOptions]);
+    }
+  };
+
+  const moveAll = (fromAvailable: boolean) => {
+    if (fromAvailable) {
+      setChosenOptions([...availableOptions.filter(option => option.isVisible), ...chosenOptions]);
+      setAvailableOptions([...availableOptions.filter(option => !option.isVisible)]);
+    } else {
+      setAvailableOptions([...chosenOptions.filter(option => option.isVisible), ...availableOptions]);
+      setChosenOptions([...chosenOptions.filter(option => !option.isVisible)]);
+    }
+  };
+
+  const onOptionSelect = (
+    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
+    index: number,
+    isChosen: boolean
+  ) => {
+    if (ignoreNextOptionSelect) {
+      setIgnoreNextOptionSelect(false);
+      return;
+    }
+    if (isChosen) {
+      const newChosen = [...chosenOptions];
+      newChosen[index].selected = !chosenOptions[index].selected;
+      setChosenOptions(newChosen);
+    } else {
+      const newAvailable = [...availableOptions];
+      newAvailable[index].selected = !availableOptions[index].selected;
+      setAvailableOptions(newAvailable);
+    }
+  };
+
+  const onDrop = (source: SourceType, dest: DestinationType) => {
+    if (dest) {
+      const newList = [...chosenOptions];
+      const [removed] = newList.splice(source.index, 1);
+      newList.splice(dest.index, 0, removed);
+      setChosenOptions(newList);
+      return true;
+    }
+    return false;
+  };
+
+  return (
+    <DualListSelector>
+      <DualListSelectorPane
+        title="Available"
+        status={`${availableOptions.filter(option => option.selected && option.isVisible).length} of ${
+          availableOptions.filter(option => option.isVisible).length
+        } options selected`}
+      >
+        <DualListSelectorList>
+          {availableOptions.map((option, index) =>
+            option.isVisible ? (
+              <DualListSelectorListItem
+                key={index}
+                isSelected={option.selected}
+                id={`composable-drag-drop-available-option-${index}`}
+                onOptionSelect={e => onOptionSelect(e, index, false)}
+              >
+                {option.text}
+              </DualListSelectorListItem>
+            ) : null
+          )}
+        </DualListSelectorList>
+      </DualListSelectorPane>
+      <DualListSelectorControlsWrapper aria-label="Selector controls">
+        <DualListSelectorControl
+          isDisabled={!availableOptions.some(option => option.selected)}
+          onClick={() => moveSelected(true)}
+          aria-label="Add selected"
+        >
+          <AngleRightIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          isDisabled={availableOptions.length === 0}
+          onClick={() => moveAll(true)}
+          aria-label="Add all"
+        >
+          <AngleDoubleRightIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          isDisabled={chosenOptions.length === 0}
+          onClick={() => moveAll(false)}
+          aria-label="Remove all"
+        >
+          <AngleDoubleLeftIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          onClick={() => moveSelected(false)}
+          isDisabled={!chosenOptions.some(option => option.selected)}
+          aria-label="Remove selected"
+        >
+          <AngleLeftIcon />
+        </DualListSelectorControl>
+      </DualListSelectorControlsWrapper>
+      <DragDrop
+        onDrag={() => {
+          setIgnoreNextOptionSelect(true);
+          return true;
+        }}
+        onDrop={onDrop}
+      >
+        <DualListSelectorPane
+          title="Chosen"
+          status={`${chosenOptions.filter(option => option.selected && option.isVisible).length} of ${
+            chosenOptions.filter(option => option.isVisible).length
+          } options selected`}
+          isChosen
+        >
+          <Droppable hasNoWrapper>
+            <DualListSelectorList>
+              {chosenOptions.map((option, index) =>
+                option.isVisible ? (
+                  <Draggable key={index} hasNoWrapper>
+                    <DualListSelectorListItem
+                      isSelected={option.selected}
+                      id={`composable-drag-drop-chosen-option-${index}`}
+                      onOptionSelect={e => onOptionSelect(e, index, true)}
+                      isDraggable
+                    >
+                      {option.text}
+                    </DualListSelectorListItem>
+                  </Draggable>
+                ) : null
+              )}
+            </DualListSelectorList>
+          </Droppable>
+        </DualListSelectorPane>
+      </DragDrop>
+    </DualListSelector>
+  );
+};
diff --git a/packages/react-core/src/components/DualListSelector/examples/ComposableTree.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
similarity index 98%
rename from packages/react-core/src/components/DualListSelector/examples/ComposableTree.tsx
rename to packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
index 1622059291b..45248c2c1bd 100644
--- a/packages/react-core/src/components/DualListSelector/examples/ComposableTree.tsx
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
@@ -24,7 +24,7 @@ interface ExampleProps {
   data: FoodNode[];
 }
 
-export const ComposableDualListSelectorTree: React.FunctionComponent<ExampleProps> = ({ data }: ExampleProps) => {
+export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProps> = ({ data }: ExampleProps) => {
   const [checkedLeafIds, setCheckedLeafIds] = React.useState<string[]>([]);
   const [chosenLeafIds, setChosenLeafIds] = React.useState<string[]>(['beans', 'beef', 'chicken', 'tofu']);
   const [chosenFilter, setChosenFilter] = React.useState<string>('');
@@ -290,8 +290,8 @@ export const ComposableDualListSelectorTree: React.FunctionComponent<ExampleProp
   );
 };
 
-export const ComposableDualListSelectorTreeExample: React.FunctionComponent = () => (
-  <ComposableDualListSelectorTree
+export const DualListSelectorComposableTreeExample: React.FunctionComponent = () => (
+  <DualListSelectorComposableTree
     data={[
       {
         id: 'fruits',
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorTree.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorTree.tsx
new file mode 100644
index 00000000000..398a6e4344c
--- /dev/null
+++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorTree.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { DualListSelector } from '@patternfly/react-core';
+
+export const DualListSelectorTree: React.FunctionComponent = () => {
+  const [availableOptions, setAvailableOptions] = React.useState<React.ReactNode[]>([
+    {
+      id: 'F1',
+      text: 'Folder 1',
+      isChecked: false,
+      checkProps: { 'aria-label': 'Folder 1' },
+      hasBadge: true,
+      badgeProps: { isRead: true },
+      children: [
+        { id: 'O1', text: 'Option 1', isChecked: false, checkProps: { 'aria-label': 'Option 1' } },
+        {
+          id: 'F1A',
+          text: 'Folder 1A',
+          isChecked: false,
+          checkProps: { 'aria-label': 'Folder 1A' },
+          children: [
+            { id: 'O2', text: 'Option 2', isChecked: false, checkProps: { 'aria-label': 'Option 2' } },
+            { id: 'O3', text: 'Option 3', isChecked: false, checkProps: { 'aria-label': 'Option 3' } }
+          ]
+        },
+        { id: 'O4', text: 'Option 4', isChecked: false, checkProps: { 'aria-label': 'Option 4' } }
+      ]
+    },
+    { id: 'O5', text: 'Option 5', isChecked: false, checkProps: { 'aria-label': 'Option 5' } },
+    {
+      id: 'F2',
+      text: 'Folder 2',
+      isChecked: false,
+      checkProps: { 'aria-label': 'Folder 2' },
+      children: [
+        { id: 'O6', text: 'Option 6', isChecked: false, checkProps: { 'aria-label': 'Option 6' } },
+        { id: 'O7', text: 'Option 5', isChecked: false, checkProps: { 'aria-label': 'Option 5 duplicate' } }
+      ]
+    }
+  ]);
+
+  const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([
+    {
+      id: 'CF1',
+      text: 'Chosen Folder 1',
+      isChecked: false,
+      checkProps: { 'aria-label': 'Chosen Folder 1' },
+      hasBadge: true,
+      badgeProps: { isRead: true },
+      children: [
+        { id: 'CO1', text: 'Chosen Option 1', isChecked: false, checkProps: { 'aria-label': 'Chosen Option 1' } },
+        {
+          id: 'CF1A',
+          text: 'Chosen Folder 1A',
+          isChecked: false,
+          checkProps: { 'aria-label': 'Chosen Folder 1A' },
+          children: [
+            {
+              id: 'CO2',
+              text: 'Chosen Option 2',
+              isChecked: false,
+              checkProps: { 'aria-label': 'Chosen Option 2' }
+            },
+            {
+              id: 'CO3',
+              text: 'Chosen Option 3',
+              isChecked: false,
+              checkProps: { 'aria-label': 'Chosen Option 3' }
+            }
+          ]
+        },
+        { id: 'CO4', text: 'Chosen Option 4', isChecked: false, checkProps: { 'aria-label': 'Chosen Option 4' } }
+      ]
+    }
+  ]);
+
+  const onListChange = (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => {
+    setAvailableOptions(newAvailableOptions.sort());
+    setChosenOptions(newChosenOptions.sort());
+  };
+
+  return (
+    <DualListSelector
+      isSearchable
+      isTree
+      availableOptions={availableOptions}
+      chosenOptions={chosenOptions}
+      onListChange={onListChange}
+      id="dual-list-selector-tree"
+    />
+  );
+};