@patternfly/patternfly/docs/components/DualListSelector/examples/DualListSelector.md

Assets, source, tooling, and content for PatternFly 4

---
id: 'Dual list selector'
section: components
cssPrefix: pf-v5-c-dual-list-selector
---## Examples

### Basic

```html
<div class="pf-v5-c-dual-list-selector">
  <div class="pf-v5-c-dual-list-selector__pane pf-m-available">
    <div class="pf-v5-c-dual-list-selector__header">
      <div class="pf-v5-c-dual-list-selector__title">
        <div class="pf-v5-c-dual-list-selector__title-text">Available options</div>
      </div>
    </div>
    <div class="pf-v5-c-dual-list-selector__tools">
      <div class="pf-v5-c-dual-list-selector__tools-filter">
        <div class="pf-v5-c-text-input-group">
          <div class="pf-v5-c-text-input-group__main pf-m-icon">
            <span class="pf-v5-c-text-input-group__text">
              <span class="pf-v5-c-text-input-group__icon">
                <i class="fas fa-fw fa-search"></i>
              </span>
              <input
                class="pf-v5-c-text-input-group__text-input"
                type="text"
                value
                aria-label="Search input"
              />
            </span>
          </div>
        </div>
      </div>
      <div class="pf-v5-c-dual-list-selector__tools-actions">
        <button
          class="pf-v5-c-button pf-m-plain"
          type="button"
          aria-label="Sort"
        >
          <i
            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
            aria-hidden="true"
          ></i>
        </button>
        <div class="pf-v5-c-dropdown">
          <button
            class="pf-v5-c-dropdown__toggle pf-m-plain"
            id="dropdown-kebab-basic-available-button"
            aria-expanded="false"
            type="button"
            aria-label="Actions"
          >
            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
          </button>
          <ul
            class="pf-v5-c-dropdown__menu"
            aria-labelledby="dropdown-kebab-basic-available-button"
            hidden
            role="menu"
          >
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                href="#"
              >Link</a>
            </li>
            <li role="none">
              <button
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                type="button"
              >Action</button>
            </li>
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item pf-m-disabled"
                role="menuitem"
                href="#"
                aria-disabled="true"
                tabindex="-1"
              >Disabled link</a>
            </li>
            <li role="none">
              <button
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                type="button"
                disabled
              >Disabled action</button>
            </li>
            <li class="pf-v5-c-divider" role="separator"></li>
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                href="#"
              >Separated link</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="pf-v5-c-dual-list-selector__status">
      <span
        class="pf-v5-c-dual-list-selector__status-text"
        id="basic-available-status-text"
      >0 of 5 items selected</span>
    </div>
    <div class="pf-v5-c-dual-list-selector__menu">
      <ul
        class="pf-v5-c-dual-list-selector__list"
        role="listbox"
        aria-labelledby="basic-available-status-text"
        aria-multiselectable="true"
        aria-activedescendant
      >
        <li class="pf-v5-c-dual-list-selector__list-item" role="option">
          <div class="pf-v5-c-dual-list-selector__list-item-row">
            <span class="pf-v5-c-dual-list-selector__item">
              <span class="pf-v5-c-dual-list-selector__item-main">
                <span class="pf-v5-c-dual-list-selector__item-text">Item1</span>
              </span>
              <span class="pf-v5-c-dual-list-selector__item-count">
                <span class="pf-v5-c-badge pf-m-read"></span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v5-c-dual-list-selector__list-item" role="option">
          <div class="pf-v5-c-dual-list-selector__list-item-row">
            <span class="pf-v5-c-dual-list-selector__item">
              <span class="pf-v5-c-dual-list-selector__item-main">
                <span class="pf-v5-c-dual-list-selector__item-text">Item2</span>
              </span>
              <span class="pf-v5-c-dual-list-selector__item-count">
                <span class="pf-v5-c-badge pf-m-read"></span>
              </span>
            </span>
          </div>
        </li>
        <li
          class="pf-v5-c-dual-list-selector__list-item pf-m-disabled"
          role="option"
        >
          <div class="pf-v5-c-dual-list-selector__list-item-row">
            <span class="pf-v5-c-dual-list-selector__item">
              <span class="pf-v5-c-dual-list-selector__item-main">
                <span
                  class="pf-v5-c-dual-list-selector__item-text"
                >Item3 (disabled)</span>
              </span>
              <span class="pf-v5-c-dual-list-selector__item-count">
                <span class="pf-v5-c-badge pf-m-read"></span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v5-c-dual-list-selector__list-item" role="option">
          <div class="pf-v5-c-dual-list-selector__list-item-row">
            <span class="pf-v5-c-dual-list-selector__item">
              <span class="pf-v5-c-dual-list-selector__item-main">
                <span class="pf-v5-c-dual-list-selector__item-text">Item4</span>
              </span>
              <span class="pf-v5-c-dual-list-selector__item-count">
                <span class="pf-v5-c-badge pf-m-read"></span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v5-c-dual-list-selector__list-item" role="option">
          <div class="pf-v5-c-dual-list-selector__list-item-row">
            <span class="pf-v5-c-dual-list-selector__item">
              <span class="pf-v5-c-dual-list-selector__item-main">
                <span class="pf-v5-c-dual-list-selector__item-text">Item5</span>
              </span>
              <span class="pf-v5-c-dual-list-selector__item-count">
                <span class="pf-v5-c-badge pf-m-read"></span>
              </span>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="pf-v5-c-dual-list-selector__controls">
    <div class="pf-v5-c-dual-list-selector__controls-item">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        disabled
        aria-label="Add selected"
      >
        <i class="fas fa-fw fa-angle-right"></i>
      </button>
    </div>
    <div class="pf-v5-c-dual-list-selector__controls-item">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        aria-label="Add all"
      >
        <i class="fas fa-fw fa-angle-double-right"></i>
      </button>
    </div>
    <div class="pf-v5-c-dual-list-selector__controls-item">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        disabled
        aria-label="Remove all"
      >
        <i class="fas fa-fw fa-angle-double-left"></i>
      </button>
    </div>
    <div class="pf-v5-c-dual-list-selector__controls-item">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        disabled
        aria-label="Remove selected"
      >
        <i class="fas fa-fw fa-angle-left"></i>
      </button>
    </div>
  </div>
  <div class="pf-v5-c-dual-list-selector__pane pf-m-chosen">
    <div class="pf-v5-c-dual-list-selector__header">
      <div class="pf-v5-c-dual-list-selector__title">
        <div class="pf-v5-c-dual-list-selector__title-text">Chosen options</div>
      </div>
    </div>
    <div class="pf-v5-c-dual-list-selector__tools">
      <div class="pf-v5-c-dual-list-selector__tools-filter">
        <div class="pf-v5-c-text-input-group">
          <div class="pf-v5-c-text-input-group__main pf-m-icon">
            <span class="pf-v5-c-text-input-group__text">
              <span class="pf-v5-c-text-input-group__icon">
                <i class="fas fa-fw fa-search"></i>
              </span>
              <input
                class="pf-v5-c-text-input-group__text-input"
                type="text"
                value
                aria-label="Search input"
              />
            </span>
          </div>
        </div>
      </div>
      <div class="pf-v5-c-dual-list-selector__tools-actions">
        <button
          class="pf-v5-c-button pf-m-plain"
          type="button"
          aria-label="Sort"
        >
          <i
            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
            aria-hidden="true"
          ></i>
        </button>
        <div class="pf-v5-c-dropdown">
          <button
            class="pf-v5-c-dropdown__toggle pf-m-plain"
            id="dropdown-kebab-basic-chosen-button"
            aria-expanded="false"
            type="button"
            aria-label="Actions"
          >
            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
          </button>
          <ul
            class="pf-v5-c-dropdown__menu"
            aria-labelledby="dropdown-kebab-basic-chosen-button"
            hidden
            role="menu"
          >
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                href="#"
              >Link</a>
            </li>
            <li role="none">
              <button
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                type="button"
              >Action</button>
            </li>
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item pf-m-disabled"
                role="menuitem"
                href="#"
                aria-disabled="true"
                tabindex="-1"
              >Disabled link</a>
            </li>
            <li role="none">
              <button
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                type="button"
                disabled
              >Disabled action</button>
            </li>
            <li class="pf-v5-c-divider" role="separator"></li>
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                href="#"
              >Separated link</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="pf-v5-c-dual-list-selector__status">
      <span
        class="pf-v5-c-dual-list-selector__status-text"
        id="basic-chosen-status-text"
      >0 of 0 items selected</span>
    </div>
    <div class="pf-v5-c-dual-list-selector__menu">
      <ul
        class="pf-v5-c-dual-list-selector__list"
        role="listbox"
        aria-labelledby="basic-chosen-status-text"
        aria-multiselectable="true"
        aria-activedescendant
      ></ul>
    </div>
  </div>
</div>

```

### Available item selected

```html
<div class="pf-v5-c-dual-list-selector">
  <div class="pf-v5-c-dual-list-selector__pane pf-m-available">
    <div class="pf-v5-c-dual-list-selector__header">
      <div class="pf-v5-c-dual-list-selector__title">
        <div class="pf-v5-c-dual-list-selector__title-text">Available options</div>
      </div>
    </div>
    <div class="pf-v5-c-dual-list-selector__tools">
      <div class="pf-v5-c-dual-list-selector__tools-filter">
        <div class="pf-v5-c-text-input-group">
          <div class="pf-v5-c-text-input-group__main pf-m-icon">
            <span class="pf-v5-c-text-input-group__text">
              <span class="pf-v5-c-text-input-group__icon">
                <i class="fas fa-fw fa-search"></i>
              </span>
              <input
                class="pf-v5-c-text-input-group__text-input"
                type="text"
                value
                aria-label="Search input"
              />
            </span>
          </div>
        </div>
      </div>
      <div class="pf-v5-c-dual-list-selector__tools-actions">
        <button
          class="pf-v5-c-button pf-m-plain"
          type="button"
          aria-label="Sort"
        >
          <i
            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
            aria-hidden="true"
          ></i>
        </button>
        <div class="pf-v5-c-dropdown">
          <button
            class="pf-v5-c-dropdown__toggle pf-m-plain"
            id="dropdown-kebab-available-item-selected-available-button"
            aria-expanded="false"
            type="button"
            aria-label="Actions"
          >
            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
          </button>
          <ul
            class="pf-v5-c-dropdown__menu"
            aria-labelledby="dropdown-kebab-available-item-selected-available-button"
            hidden
            role="menu"
          >
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                href="#"
              >Link</a>
            </li>
            <li role="none">
              <button
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                type="button"
              >Action</button>
            </li>
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item pf-m-disabled"
                role="menuitem"
                href="#"
                aria-disabled="true"
                tabindex="-1"
              >Disabled link</a>
            </li>
            <li role="none">
              <button
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                type="button"
                disabled
              >Disabled action</button>
            </li>
            <li class="pf-v5-c-divider" role="separator"></li>
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                href="#"
              >Separated link</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="pf-v5-c-dual-list-selector__status">
      <span
        class="pf-v5-c-dual-list-selector__status-text"
        id="available-item-selected-available-status-text"
      >1 of 5 items selected</span>
    </div>
    <div class="pf-v5-c-dual-list-selector__menu">
      <ul
        class="pf-v5-c-dual-list-selector__list"
        role="listbox"
        aria-labelledby="available-item-selected-available-status-text"
        aria-multiselectable="true"
        aria-activedescendant
      >
        <li class="pf-v5-c-dual-list-selector__list-item" role="option">
          <div class="pf-v5-c-dual-list-selector__list-item-row">
            <span class="pf-v5-c-dual-list-selector__item">
              <span class="pf-v5-c-dual-list-selector__item-main">
                <span class="pf-v5-c-dual-list-selector__item-text">Item1</span>
              </span>
              <span class="pf-v5-c-dual-list-selector__item-count">
                <span class="pf-v5-c-badge pf-m-read"></span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v5-c-dual-list-selector__list-item" role="option">
          <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-selected">
            <span class="pf-v5-c-dual-list-selector__item">
              <span class="pf-v5-c-dual-list-selector__item-main">
                <span class="pf-v5-c-dual-list-selector__item-text">Item2</span>
              </span>
              <span class="pf-v5-c-dual-list-selector__item-count">
                <span class="pf-v5-c-badge pf-m-read"></span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v5-c-dual-list-selector__list-item" role="option">
          <div class="pf-v5-c-dual-list-selector__list-item-row">
            <span class="pf-v5-c-dual-list-selector__item">
              <span class="pf-v5-c-dual-list-selector__item-main">
                <span class="pf-v5-c-dual-list-selector__item-text">Item3</span>
              </span>
              <span class="pf-v5-c-dual-list-selector__item-count">
                <span class="pf-v5-c-badge pf-m-read"></span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v5-c-dual-list-selector__list-item" role="option">
          <div class="pf-v5-c-dual-list-selector__list-item-row">
            <span class="pf-v5-c-dual-list-selector__item">
              <span class="pf-v5-c-dual-list-selector__item-main">
                <span class="pf-v5-c-dual-list-selector__item-text">Item4</span>
              </span>
              <span class="pf-v5-c-dual-list-selector__item-count">
                <span class="pf-v5-c-badge pf-m-read"></span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v5-c-dual-list-selector__list-item" role="option">
          <div class="pf-v5-c-dual-list-selector__list-item-row">
            <span class="pf-v5-c-dual-list-selector__item">
              <span class="pf-v5-c-dual-list-selector__item-main">
                <span class="pf-v5-c-dual-list-selector__item-text">Item5</span>
              </span>
              <span class="pf-v5-c-dual-list-selector__item-count">
                <span class="pf-v5-c-badge pf-m-read"></span>
              </span>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="pf-v5-c-dual-list-selector__controls">
    <div class="pf-v5-c-dual-list-selector__controls-item">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        aria-label="Add selected"
      >
        <i class="fas fa-fw fa-angle-right"></i>
      </button>
    </div>
    <div class="pf-v5-c-dual-list-selector__controls-item">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        aria-label="Add all"
      >
        <i class="fas fa-fw fa-angle-double-right"></i>
      </button>
    </div>
    <div class="pf-v5-c-dual-list-selector__controls-item">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        disabled
        aria-label="Remove all"
      >
        <i class="fas fa-fw fa-angle-double-left"></i>
      </button>
    </div>
    <div class="pf-v5-c-dual-list-selector__controls-item">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        disabled
        aria-label="Remove selected"
      >
        <i class="fas fa-fw fa-angle-left"></i>
      </button>
    </div>
  </div>
  <div class="pf-v5-c-dual-list-selector__pane pf-m-chosen">
    <div class="pf-v5-c-dual-list-selector__header">
      <div class="pf-v5-c-dual-list-selector__title">
        <div class="pf-v5-c-dual-list-selector__title-text">Chosen options</div>
      </div>
    </div>
    <div class="pf-v5-c-dual-list-selector__tools">
      <div class="pf-v5-c-dual-list-selector__tools-filter">
        <div class="pf-v5-c-text-input-group">
          <div class="pf-v5-c-text-input-group__main pf-m-icon">
            <span class="pf-v5-c-text-input-group__text">
              <span class="pf-v5-c-text-input-group__icon">
                <i class="fas fa-fw fa-search"></i>
              </span>
              <input
                class="pf-v5-c-text-input-group__text-input"
                type="text"
                value
                aria-label="Search input"
              />
            </span>
          </div>
        </div>
      </div>
      <div class="pf-v5-c-dual-list-selector__tools-actions">
        <button
          class="pf-v5-c-button pf-m-plain"
          type="button"
          aria-label="Sort"
        >
          <i
            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
            aria-hidden="true"
          ></i>
        </button>
        <div class="pf-v5-c-dropdown">
          <button
            class="pf-v5-c-dropdown__toggle pf-m-plain"
            id="dropdown-kebab-available-item-selected-chosen-button"
            aria-expanded="false"
            type="button"
            aria-label="Actions"
          >
            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
          </button>
          <ul
            class="pf-v5-c-dropdown__menu"
            aria-labelledby="dropdown-kebab-available-item-selected-chosen-button"
            hidden
            role="menu"
          >
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                href="#"
              >Link</a>
            </li>
            <li role="none">
              <button
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                type="button"
              >Action</button>
            </li>
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item pf-m-disabled"
                role="menuitem"
                href="#"
                aria-disabled="true"
                tabindex="-1"
              >Disabled link</a>
            </li>
            <li role="none">
              <button
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                type="button"
                disabled
              >Disabled action</button>
            </li>
            <li class="pf-v5-c-divider" role="separator"></li>
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                href="#"
              >Separated link</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="pf-v5-c-dual-list-selector__status">
      <span
        class="pf-v5-c-dual-list-selector__status-text"
        id="available-item-selected-chosen-status-text"
      >0 of 0 items selected</span>
    </div>
    <div class="pf-v5-c-dual-list-selector__menu">
      <ul
        class="pf-v5-c-dual-list-selector__list"
        role="listbox"
        aria-labelledby="available-item-selected-chosen-status-text"
        aria-multiselectable="true"
        aria-activedescendant
      ></ul>
    </div>
  </div>
</div>

```

### Multiple available items selected

```html
<div class="pf-v5-c-dual-list-selector">
  <div class="pf-v5-c-dual-list-selector__pane pf-m-available">
    <div class="pf-v5-c-dual-list-selector__header">
      <div class="pf-v5-c-dual-list-selector__title">
        <div class="pf-v5-c-dual-list-selector__title-text">Available options</div>
      </div>
    </div>
    <div class="pf-v5-c-dual-list-selector__tools">
      <div class="pf-v5-c-dual-list-selector__tools-filter">
        <div class="pf-v5-c-text-input-group">
          <div class="pf-v5-c-text-input-group__main pf-m-icon">
            <span class="pf-v5-c-text-input-group__text">
              <span class="pf-v5-c-text-input-group__icon">
                <i class="fas fa-fw fa-search"></i>
              </span>
              <input
                class="pf-v5-c-text-input-group__text-input"
                type="text"
                value
                aria-label="Search input"
              />
            </span>
          </div>
        </div>
      </div>
      <div class="pf-v5-c-dual-list-selector__tools-actions">
        <button
          class="pf-v5-c-button pf-m-plain"
          type="button"
          aria-label="Sort"
        >
          <i
            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
            aria-hidden="true"
          ></i>
        </button>
        <div class="pf-v5-c-dropdown">
          <button
            class="pf-v5-c-dropdown__toggle pf-m-plain"
            id="dropdown-kebab-multiple-available-items-selected-available-button"
            aria-expanded="false"
            type="button"
            aria-label="Actions"
          >
            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
          </button>
          <ul
            class="pf-v5-c-dropdown__menu"
            aria-labelledby="dropdown-kebab-multiple-available-items-selected-available-button"
            hidden
            role="menu"
          >
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                href="#"
              >Link</a>
            </li>
            <li role="none">
              <button
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                type="button"
              >Action</button>
            </li>
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item pf-m-disabled"
                role="menuitem"
                href="#"
                aria-disabled="true"
                tabindex="-1"
              >Disabled link</a>
            </li>
            <li role="none">
              <button
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                type="button"
                disabled
              >Disabled action</button>
            </li>
            <li class="pf-v5-c-divider" role="separator"></li>
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                href="#"
              >Separated link</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="pf-v5-c-dual-list-selector__status">
      <span
        class="pf-v5-c-dual-list-selector__status-text"
        id="multiple-available-items-selected-available-status-text"
      >3 of 5 items selected</span>
    </div>
    <div class="pf-v5-c-dual-list-selector__menu">
      <ul
        class="pf-v5-c-dual-list-selector__list"
        role="listbox"
        aria-labelledby="multiple-available-items-selected-available-status-text"
        aria-multiselectable="true"
        aria-activedescendant
      >
        <li class="pf-v5-c-dual-list-selector__list-item" role="option">
          <div class="pf-v5-c-dual-list-selector__list-item-row">
            <span class="pf-v5-c-dual-list-selector__item">
              <span class="pf-v5-c-dual-list-selector__item-main">
                <span class="pf-v5-c-dual-list-selector__item-text">Item1</span>
              </span>
              <span class="pf-v5-c-dual-list-selector__item-count">
                <span class="pf-v5-c-badge pf-m-read"></span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v5-c-dual-list-selector__list-item" role="option">
          <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-selected">
            <span class="pf-v5-c-dual-list-selector__item">
              <span class="pf-v5-c-dual-list-selector__item-main">
                <span class="pf-v5-c-dual-list-selector__item-text">Item2</span>
              </span>
              <span class="pf-v5-c-dual-list-selector__item-count">
                <span class="pf-v5-c-badge pf-m-read"></span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v5-c-dual-list-selector__list-item" role="option">
          <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-selected">
            <span class="pf-v5-c-dual-list-selector__item">
              <span class="pf-v5-c-dual-list-selector__item-main">
                <span class="pf-v5-c-dual-list-selector__item-text">Item3</span>
              </span>
              <span class="pf-v5-c-dual-list-selector__item-count">
                <span class="pf-v5-c-badge pf-m-read"></span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v5-c-dual-list-selector__list-item" role="option">
          <div class="pf-v5-c-dual-list-selector__list-item-row">
            <span class="pf-v5-c-dual-list-selector__item">
              <span class="pf-v5-c-dual-list-selector__item-main">
                <span class="pf-v5-c-dual-list-selector__item-text">Item4</span>
              </span>
              <span class="pf-v5-c-dual-list-selector__item-count">
                <span class="pf-v5-c-badge pf-m-read"></span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v5-c-dual-list-selector__list-item" role="option">
          <div class="pf-v5-c-dual-list-selector__list-item-row pf-m-selected">
            <span class="pf-v5-c-dual-list-selector__item">
              <span class="pf-v5-c-dual-list-selector__item-main">
                <span class="pf-v5-c-dual-list-selector__item-text">Item5</span>
              </span>
              <span class="pf-v5-c-dual-list-selector__item-count">
                <span class="pf-v5-c-badge pf-m-read"></span>
              </span>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="pf-v5-c-dual-list-selector__controls">
    <div class="pf-v5-c-dual-list-selector__controls-item">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        aria-label="Add selected"
      >
        <i class="fas fa-fw fa-angle-right"></i>
      </button>
    </div>
    <div class="pf-v5-c-dual-list-selector__controls-item">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        aria-label="Add all"
      >
        <i class="fas fa-fw fa-angle-double-right"></i>
      </button>
    </div>
    <div class="pf-v5-c-dual-list-selector__controls-item">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        disabled
        aria-label="Remove all"
      >
        <i class="fas fa-fw fa-angle-double-left"></i>
      </button>
    </div>
    <div class="pf-v5-c-dual-list-selector__controls-item">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        disabled
        aria-label="Remove selected"
      >
        <i class="fas fa-fw fa-angle-left"></i>
      </button>
    </div>
  </div>
  <div class="pf-v5-c-dual-list-selector__pane pf-m-chosen">
    <div class="pf-v5-c-dual-list-selector__header">
      <div class="pf-v5-c-dual-list-selector__title">
        <div class="pf-v5-c-dual-list-selector__title-text">Chosen options</div>
      </div>
    </div>
    <div class="pf-v5-c-dual-list-selector__tools">
      <div class="pf-v5-c-dual-list-selector__tools-filter">
        <div class="pf-v5-c-text-input-group">
          <div class="pf-v5-c-text-input-group__main pf-m-icon">
            <span class="pf-v5-c-text-input-group__text">
              <span class="pf-v5-c-text-input-group__icon">
                <i class="fas fa-fw fa-search"></i>
              </span>
              <input
                class="pf-v5-c-text-input-group__text-input"
                type="text"
                value
                aria-label="Search input"
              />
            </span>
          </div>
        </div>
      </div>
      <div class="pf-v5-c-dual-list-selector__tools-actions">
        <button
          class="pf-v5-c-button pf-m-plain"
          type="button"
          aria-label="Sort"
        >
          <i
            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
            aria-hidden="true"
          ></i>
        </button>
        <div class="pf-v5-c-dropdown">
          <button
            class="pf-v5-c-dropdown__toggle pf-m-plain"
            id="dropdown-kebab-multiple-available-items-selected-chosen-button"
            aria-expanded="false"
            type="button"
            aria-label="Actions"
          >
            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
          </button>
          <ul
            class="pf-v5-c-dropdown__menu"
            aria-labelledby="dropdown-kebab-multiple-available-items-selected-chosen-button"
            hidden
            role="menu"
          >
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                href="#"
              >Link</a>
            </li>
            <li role="none">
              <button
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                type="button"
              >Action</button>
            </li>
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item pf-m-disabled"
                role="menuitem"
                href="#"
                aria-disabled="true"
                tabindex="-1"
              >Disabled link</a>
            </li>
            <li role="none">
              <button
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                type="button"
                disabled
              >Disabled action</button>
            </li>
            <li class="pf-v5-c-divider" role="separator"></li>
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                href="#"
              >Separated link</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="pf-v5-c-dual-list-selector__status">
      <span
        class="pf-v5-c-dual-list-selector__status-text"
        id="multiple-available-items-selected-chosen-status-text"
      >0 of 0 items selected</span>
    </div>
    <div class="pf-v5-c-dual-list-selector__menu">
      <ul
        class="pf-v5-c-dual-list-selector__list"
        role="listbox"
        aria-labelledby="multiple-available-items-selected-chosen-status-text"
        aria-multiselectable="true"
        aria-activedescendant
      ></ul>
    </div>
  </div>
</div>

```

### Chosen item

```html
<div class="pf-v5-c-dual-list-selector">
  <div class="pf-v5-c-dual-list-selector__pane pf-m-available">
    <div class="pf-v5-c-dual-list-selector__header">
      <div class="pf-v5-c-dual-list-selector__title">
        <div class="pf-v5-c-dual-list-selector__title-text">Available options</div>
      </div>
    </div>
    <div class="pf-v5-c-dual-list-selector__tools">
      <div class="pf-v5-c-dual-list-selector__tools-filter">
        <div class="pf-v5-c-text-input-group">
          <div class="pf-v5-c-text-input-group__main pf-m-icon">
            <span class="pf-v5-c-text-input-group__text">
              <span class="pf-v5-c-text-input-group__icon">
                <i class="fas fa-fw fa-search"></i>
              </span>
              <input
                class="pf-v5-c-text-input-group__text-input"
                type="text"
                value
                aria-label="Search input"
              />
            </span>
          </div>
        </div>
      </div>
      <div class="pf-v5-c-dual-list-selector__tools-actions">
        <button
          class="pf-v5-c-button pf-m-plain"
          type="button"
          aria-label="Sort"
        >
          <i
            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
            aria-hidden="true"
          ></i>
        </button>
        <div class="pf-v5-c-dropdown">
          <button
            class="pf-v5-c-dropdown__toggle pf-m-plain"
            id="dropdown-kebab-chosen-item-available-button"
            aria-expanded="false"
            type="button"
            aria-label="Actions"
          >
            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
          </button>
          <ul
            class="pf-v5-c-dropdown__menu"
            aria-labelledby="dropdown-kebab-chosen-item-available-button"
            hidden
            role="menu"
          >
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                href="#"
              >Link</a>
            </li>
            <li role="none">
              <button
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                type="button"
              >Action</button>
            </li>
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item pf-m-disabled"
                role="menuitem"
                href="#"
                aria-disabled="true"
                tabindex="-1"
              >Disabled link</a>
            </li>
            <li role="none">
              <button
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                type="button"
                disabled
              >Disabled action</button>
            </li>
            <li class="pf-v5-c-divider" role="separator"></li>
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                href="#"
              >Separated link</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="pf-v5-c-dual-list-selector__status">
      <span
        class="pf-v5-c-dual-list-selector__status-text"
        id="chosen-item-available-status-text"
      >0 of 4 items selected</span>
    </div>
    <div class="pf-v5-c-dual-list-selector__menu">
      <ul
        class="pf-v5-c-dual-list-selector__list"
        role="listbox"
        aria-labelledby="chosen-item-available-status-text"
        aria-multiselectable="true"
        aria-activedescendant
      >
        <li class="pf-v5-c-dual-list-selector__list-item" role="option">
          <div class="pf-v5-c-dual-list-selector__list-item-row">
            <span class="pf-v5-c-dual-list-selector__item">
              <span class="pf-v5-c-dual-list-selector__item-main">
                <span class="pf-v5-c-dual-list-selector__item-text">Item1</span>
              </span>
              <span class="pf-v5-c-dual-list-selector__item-count">
                <span class="pf-v5-c-badge pf-m-read"></span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v5-c-dual-list-selector__list-item" role="option">
          <div class="pf-v5-c-dual-list-selector__list-item-row">
            <span class="pf-v5-c-dual-list-selector__item">
              <span class="pf-v5-c-dual-list-selector__item-main">
                <span class="pf-v5-c-dual-list-selector__item-text">Item2</span>
              </span>
              <span class="pf-v5-c-dual-list-selector__item-count">
                <span class="pf-v5-c-badge pf-m-read"></span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v5-c-dual-list-selector__list-item" role="option">
          <div class="pf-v5-c-dual-list-selector__list-item-row">
            <span class="pf-v5-c-dual-list-selector__item">
              <span class="pf-v5-c-dual-list-selector__item-main">
                <span class="pf-v5-c-dual-list-selector__item-text">Item3</span>
              </span>
              <span class="pf-v5-c-dual-list-selector__item-count">
                <span class="pf-v5-c-badge pf-m-read"></span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v5-c-dual-list-selector__list-item" role="option">
          <div class="pf-v5-c-dual-list-selector__list-item-row">
            <span class="pf-v5-c-dual-list-selector__item">
              <span class="pf-v5-c-dual-list-selector__item-main">
                <span class="pf-v5-c-dual-list-selector__item-text">Item4</span>
              </span>
              <span class="pf-v5-c-dual-list-selector__item-count">
                <span class="pf-v5-c-badge pf-m-read"></span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v5-c-dual-list-selector__list-item" role="option">
          <div class="pf-v5-c-dual-list-selector__list-item-row">
            <span class="pf-v5-c-dual-list-selector__item">
              <span class="pf-v5-c-dual-list-selector__item-main">
                <span class="pf-v5-c-dual-list-selector__item-text">Item5</span>
              </span>
              <span class="pf-v5-c-dual-list-selector__item-count">
                <span class="pf-v5-c-badge pf-m-read"></span>
              </span>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="pf-v5-c-dual-list-selector__controls">
    <div class="pf-v5-c-dual-list-selector__controls-item">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        disabled
        aria-label="Add selected"
      >
        <i class="fas fa-fw fa-angle-right"></i>
      </button>
    </div>
    <div class="pf-v5-c-dual-list-selector__controls-item">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        aria-label="Add all"
      >
        <i class="fas fa-fw fa-angle-double-right"></i>
      </button>
    </div>
    <div class="pf-v5-c-dual-list-selector__controls-item">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        aria-label="Remove all"
      >
        <i class="fas fa-fw fa-angle-double-left"></i>
      </button>
    </div>
    <div class="pf-v5-c-dual-list-selector__controls-item">
      <button
        class="pf-v5-c-button pf-m-plain"
        type="button"
        disabled
        aria-label="Remove selected"
      >
        <i class="fas fa-fw fa-angle-left"></i>
      </button>
    </div>
  </div>
  <div class="pf-v5-c-dual-list-selector__pane pf-m-chosen">
    <div class="pf-v5-c-dual-list-selector__header">
      <div class="pf-v5-c-dual-list-selector__title">
        <div class="pf-v5-c-dual-list-selector__title-text">Chosen options</div>
      </div>
    </div>
    <div class="pf-v5-c-dual-list-selector__tools">
      <div class="pf-v5-c-dual-list-selector__tools-filter">
        <div class="pf-v5-c-text-input-group">
          <div class="pf-v5-c-text-input-group__main pf-m-icon">
            <span class="pf-v5-c-text-input-group__text">
              <span class="pf-v5-c-text-input-group__icon">
                <i class="fas fa-fw fa-search"></i>
              </span>
              <input
                class="pf-v5-c-text-input-group__text-input"
                type="text"
                value
                aria-label="Search input"
              />
            </span>
          </div>
        </div>
      </div>
      <div class="pf-v5-c-dual-list-selector__tools-actions">
        <button
          class="pf-v5-c-button pf-m-plain"
          type="button"
          aria-label="Sort"
        >
          <i
            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
            aria-hidden="true"
          ></i>
        </button>
        <div class="pf-v5-c-dropdown">
          <button
            class="pf-v5-c-dropdown__toggle pf-m-plain"
            id="dropdown-kebab-chosen-item-chosen-button"
            aria-expanded="false"
            type="button"
            aria-label="Actions"
          >
            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
          </button>
          <ul
            class="pf-v5-c-dropdown__menu"
            aria-labelledby="dropdown-kebab-chosen-item-chosen-button"
            hidden
            role="menu"
          >
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                href="#"
              >Link</a>
            </li>
            <li role="none">
              <button
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                type="button"
              >Action</button>
            </li>
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item pf-m-disabled"
                role="menuitem"
                href="#"
                aria-disabled="true"
                tabindex="-1"
              >Disabled link</a>
            </li>
            <li role="none">
              <button
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                type="button"
                disabled
              >Disabled action</button>
            </li>
            <li class="pf-v5-c-divider" role="separator"></li>
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                href="#"
              >Separated link</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="pf-v5-c-dual-list-selector__status">
      <span
        class="pf-v5-c-dual-list-selector__status-text"
        id="chosen-item-chosen-status-text"
      >0 of 1 items selected</span>
    </div>
    <div class="pf-v5-c-dual-list-selector__menu">
      <ul
        class="pf-v5-c-dual-list-selector__list"
        role="listbox"
        aria-labelledby="chosen-item-chosen-status-text"
        aria-multiselectable="true"
        aria-activedescendant
      >
        <li class="pf-v5-c-dual-list-selector__list-item" role="option">
          <div class="pf-v5-c-dual-list-selector__list-item-row">
            <span class="pf-v5-c-dual-list-selector__item">
              <span class="pf-v5-c-dual-list-selector__item-main">
                <span class="pf-v5-c-dual-list-selector__item-text">Item1</span>
              </span>
              <span class="pf-v5-c-dual-list-selector__item-count">
                <span class="pf-v5-c-badge pf-m-read"></span>
              </span>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

```

### Chosen item selected

```html
<div class="pf-v5-c-dual-list-selector">
  <div class="pf-v5-c-dual-list-selector__pane pf-m-available">
    <div class="pf-v5-c-dual-list-selector__header">
      <div class="pf-v5-c-dual-list-selector__title">
        <div class="pf-v5-c-dual-list-selector__title-text">Available options</div>
      </div>
    </div>
    <div class="pf-v5-c-dual-list-selector__tools">
      <div class="pf-v5-c-dual-list-selector__tools-filter">
        <div class="pf-v5-c-text-input-group">
          <div class="pf-v5-c-text-input-group__main pf-m-icon">
            <span class="pf-v5-c-text-input-group__text">
              <span class="pf-v5-c-text-input-group__icon">
                <i class="fas fa-fw fa-search"></i>
              </span>
              <input
                class="pf-v5-c-text-input-group__text-input"
                type="text"
                value
                aria-label="Search input"
              />
            </span>
          </div>
        </div>
      </div>
      <div class="pf-v5-c-dual-list-selector__tools-actions">
        <button
          class="pf-v5-c-button pf-m-plain"
          type="button"
          aria-label="Sort"
        >
          <i
            class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
            aria-hidden="true"
          ></i>
        </button>
        <div class="pf-v5-c-dropdown">
          <button
            class="pf-v5-c-dropdown__toggle pf-m-plain"
            id="dropdown-kebab-chosen-item-selected-available-button"
            aria-expanded="false"
            type="button"
            aria-label="Actions"
          >
            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
          </button>
          <ul
            class="pf-v5-c-dropdown__menu"
            aria-labelledby="dropdown-kebab-chosen-item-selected-available-button"
            hidden
            role="menu"
          >
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                href="#"
              >Link</a>
            </li>
            <li role="none">
              <button
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                type="button"
              >Action</button>
            </li>
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item pf-m-disabled"
                role="menuitem"
                href="#"
                aria-disabled="true"
                tabindex="-1"
              >Disabled link</a>
            </li>
            <li role="none">
              <button
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                type="button"
                disabled
              >Disabled action</button>
            </li>
            <li class="pf-v5-c-divider" role="separator"></li>
            <li role="none">
              <a
                class="pf-v5-c-dropdown__menu-item"
                role="menuitem"
                href="#"
              >Separated link</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="pf-v5-c-dual-list-selector__status">
      <span
        class="pf-v5-c-dual-list-selector__status-text"
        id="chosen-item-selected-available-status-text"
      >0 of 4 items selected</span>
    </div>
    <div class="pf-v5-c-dual-list-selector__menu">
      <ul
        class="pf-v5-c-dual-list-selector__list"
        role="listbox"
        aria-labelledby="chosen-item-selected-available-status-text"
        aria-multiselectable="true"
        aria-activedescendant
      >
        <li class="pf-v5-c-dual-list-selector__list-item" role="option">
          <di