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

Assets, source, tooling, and content for PatternFly 4

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

### Basic

```html
<div class="pf-v6-c-dual-list-selector">
  <div class="pf-v6-c-dual-list-selector__pane pf-m-available">
    <div class="pf-v6-c-dual-list-selector__header">
      <div class="pf-v6-c-dual-list-selector__title">
        <div class="pf-v6-c-dual-list-selector__title-text">Available options</div>
      </div>
    </div>
    <div class="pf-v6-c-dual-list-selector__tools">
      <div class="pf-v6-c-dual-list-selector__tools-filter">
        <div class="pf-v6-c-text-input-group">
          <div class="pf-v6-c-text-input-group__main pf-m-icon">
            <span class="pf-v6-c-text-input-group__text">
              <span class="pf-v6-c-text-input-group__icon">
                <i class="fas fa-fw fa-search"></i>
              </span>
              <input
                class="pf-v6-c-text-input-group__text-input"
                type="text"
                value
                aria-label="Search input"
              />
            </span>
          </div>
        </div>
      </div>
      <div class="pf-v6-c-dual-list-selector__tools-actions">
        <button
          class="pf-v6-c-button pf-m-plain"
          type="button"
          aria-label="Sort"
        >
          <span class="pf-v6-c-button__icon pf-m-start">
            <i
              class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
              aria-hidden="true"
            ></i>
          </span>
        </button>
        <button
          class="pf-v6-c-menu-toggle pf-m-plain"
          type="button"
          aria-expanded="false"
          aria-label="Dual list item menu toggle"
          id="basic-available-menu-toggle"
        >
          <span class="pf-v6-c-menu-toggle__icon">
            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
          </span>
        </button>
      </div>
    </div>
    <div class="pf-v6-c-dual-list-selector__status">
      <span
        class="pf-v6-c-dual-list-selector__status-text"
        id="basic-available-status-text"
      >0 of 5 items selected</span>
    </div>
    <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
      <ul
        class="pf-v6-c-dual-list-selector__list"
        role="listbox"
        aria-labelledby="basic-available-status-text"
        aria-multiselectable="true"
        aria-activedescendant
      >
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item1</span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item2</span>
              </span>
            </span>
          </div>
        </li>
        <li
          class="pf-v6-c-dual-list-selector__list-item pf-m-disabled"
          role="option"
        >
          <div class="pf-v6-c-dual-list-selector__list-item-row">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span
                  class="pf-v6-c-dual-list-selector__item-text"
                >Item3 (disabled)</span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item4</span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item5</span>
              </span>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="pf-v6-c-dual-list-selector__controls">
    <div class="pf-v6-c-dual-list-selector__controls-item">
      <button
        class="pf-v6-c-button pf-m-plain"
        type="button"
        disabled
        aria-label="Add selected"
      >
        <span class="pf-v6-c-button__icon">
          <i class="fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <div class="pf-v6-c-dual-list-selector__controls-item">
      <button
        class="pf-v6-c-button pf-m-plain"
        type="button"
        aria-label="Add all"
      >
        <span class="pf-v6-c-button__icon">
          <i class="fas fa-angle-double-right fa-fw" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <div class="pf-v6-c-dual-list-selector__controls-item">
      <button
        class="pf-v6-c-button pf-m-plain"
        type="button"
        disabled
        aria-label="Remove all"
      >
        <span class="pf-v6-c-button__icon">
          <i class="fas fa-angle-double-left fa-fw" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <div class="pf-v6-c-dual-list-selector__controls-item">
      <button
        class="pf-v6-c-button pf-m-plain"
        type="button"
        disabled
        aria-label="Remove selected"
      >
        <span class="pf-v6-c-button__icon">
          <i class="fas fa-angle-left fa-fw" aria-hidden="true"></i>
        </span>
      </button>
    </div>
  </div>
  <div class="pf-v6-c-dual-list-selector__pane pf-m-chosen">
    <div class="pf-v6-c-dual-list-selector__header">
      <div class="pf-v6-c-dual-list-selector__title">
        <div class="pf-v6-c-dual-list-selector__title-text">Chosen options</div>
      </div>
    </div>
    <div class="pf-v6-c-dual-list-selector__tools">
      <div class="pf-v6-c-dual-list-selector__tools-filter">
        <div class="pf-v6-c-text-input-group">
          <div class="pf-v6-c-text-input-group__main pf-m-icon">
            <span class="pf-v6-c-text-input-group__text">
              <span class="pf-v6-c-text-input-group__icon">
                <i class="fas fa-fw fa-search"></i>
              </span>
              <input
                class="pf-v6-c-text-input-group__text-input"
                type="text"
                value
                aria-label="Search input"
              />
            </span>
          </div>
        </div>
      </div>
      <div class="pf-v6-c-dual-list-selector__tools-actions">
        <button
          class="pf-v6-c-button pf-m-plain"
          type="button"
          aria-label="Sort"
        >
          <span class="pf-v6-c-button__icon pf-m-start">
            <i
              class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
              aria-hidden="true"
            ></i>
          </span>
        </button>
        <button
          class="pf-v6-c-menu-toggle pf-m-plain"
          type="button"
          aria-expanded="false"
          aria-label="Dual list item menu toggle"
          id="basic-chosen-menu-toggle"
        >
          <span class="pf-v6-c-menu-toggle__icon">
            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
          </span>
        </button>
      </div>
    </div>
    <div class="pf-v6-c-dual-list-selector__status">
      <span
        class="pf-v6-c-dual-list-selector__status-text"
        id="basic-chosen-status-text"
      >0 of 0 items selected</span>
    </div>
    <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
      <ul
        class="pf-v6-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-v6-c-dual-list-selector">
  <div class="pf-v6-c-dual-list-selector__pane pf-m-available">
    <div class="pf-v6-c-dual-list-selector__header">
      <div class="pf-v6-c-dual-list-selector__title">
        <div class="pf-v6-c-dual-list-selector__title-text">Available options</div>
      </div>
    </div>
    <div class="pf-v6-c-dual-list-selector__tools">
      <div class="pf-v6-c-dual-list-selector__tools-filter">
        <div class="pf-v6-c-text-input-group">
          <div class="pf-v6-c-text-input-group__main pf-m-icon">
            <span class="pf-v6-c-text-input-group__text">
              <span class="pf-v6-c-text-input-group__icon">
                <i class="fas fa-fw fa-search"></i>
              </span>
              <input
                class="pf-v6-c-text-input-group__text-input"
                type="text"
                value
                aria-label="Search input"
              />
            </span>
          </div>
        </div>
      </div>
      <div class="pf-v6-c-dual-list-selector__tools-actions">
        <button
          class="pf-v6-c-button pf-m-plain"
          type="button"
          aria-label="Sort"
        >
          <span class="pf-v6-c-button__icon pf-m-start">
            <i
              class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
              aria-hidden="true"
            ></i>
          </span>
        </button>
        <button
          class="pf-v6-c-menu-toggle pf-m-plain"
          type="button"
          aria-expanded="false"
          aria-label="Dual list item menu toggle"
          id="available-item-selected-available-menu-toggle"
        >
          <span class="pf-v6-c-menu-toggle__icon">
            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
          </span>
        </button>
      </div>
    </div>
    <div class="pf-v6-c-dual-list-selector__status">
      <span
        class="pf-v6-c-dual-list-selector__status-text"
        id="available-item-selected-available-status-text"
      >1 of 5 items selected</span>
    </div>
    <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
      <ul
        class="pf-v6-c-dual-list-selector__list"
        role="listbox"
        aria-labelledby="available-item-selected-available-status-text"
        aria-multiselectable="true"
        aria-activedescendant
      >
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item1</span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-selected">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item2</span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item3</span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item4</span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item5</span>
              </span>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="pf-v6-c-dual-list-selector__controls">
    <div class="pf-v6-c-dual-list-selector__controls-item">
      <button
        class="pf-v6-c-button pf-m-plain"
        type="button"
        aria-label="Add selected"
      >
        <span class="pf-v6-c-button__icon">
          <i class="fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <div class="pf-v6-c-dual-list-selector__controls-item">
      <button
        class="pf-v6-c-button pf-m-plain"
        type="button"
        aria-label="Add all"
      >
        <span class="pf-v6-c-button__icon">
          <i class="fas fa-angle-double-right fa-fw" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <div class="pf-v6-c-dual-list-selector__controls-item">
      <button
        class="pf-v6-c-button pf-m-plain"
        type="button"
        disabled
        aria-label="Remove all"
      >
        <span class="pf-v6-c-button__icon">
          <i class="fas fa-angle-double-left fa-fw" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <div class="pf-v6-c-dual-list-selector__controls-item">
      <button
        class="pf-v6-c-button pf-m-plain"
        type="button"
        disabled
        aria-label="Remove selected"
      >
        <span class="pf-v6-c-button__icon">
          <i class="fas fa-angle-left fa-fw" aria-hidden="true"></i>
        </span>
      </button>
    </div>
  </div>
  <div class="pf-v6-c-dual-list-selector__pane pf-m-chosen">
    <div class="pf-v6-c-dual-list-selector__header">
      <div class="pf-v6-c-dual-list-selector__title">
        <div class="pf-v6-c-dual-list-selector__title-text">Chosen options</div>
      </div>
    </div>
    <div class="pf-v6-c-dual-list-selector__tools">
      <div class="pf-v6-c-dual-list-selector__tools-filter">
        <div class="pf-v6-c-text-input-group">
          <div class="pf-v6-c-text-input-group__main pf-m-icon">
            <span class="pf-v6-c-text-input-group__text">
              <span class="pf-v6-c-text-input-group__icon">
                <i class="fas fa-fw fa-search"></i>
              </span>
              <input
                class="pf-v6-c-text-input-group__text-input"
                type="text"
                value
                aria-label="Search input"
              />
            </span>
          </div>
        </div>
      </div>
      <div class="pf-v6-c-dual-list-selector__tools-actions">
        <button
          class="pf-v6-c-button pf-m-plain"
          type="button"
          aria-label="Sort"
        >
          <span class="pf-v6-c-button__icon pf-m-start">
            <i
              class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
              aria-hidden="true"
            ></i>
          </span>
        </button>
        <button
          class="pf-v6-c-menu-toggle pf-m-plain"
          type="button"
          aria-expanded="false"
          aria-label="Dual list item menu toggle"
          id="available-item-selected-chosen-menu-toggle"
        >
          <span class="pf-v6-c-menu-toggle__icon">
            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
          </span>
        </button>
      </div>
    </div>
    <div class="pf-v6-c-dual-list-selector__status">
      <span
        class="pf-v6-c-dual-list-selector__status-text"
        id="available-item-selected-chosen-status-text"
      >0 of 0 items selected</span>
    </div>
    <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
      <ul
        class="pf-v6-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-v6-c-dual-list-selector">
  <div class="pf-v6-c-dual-list-selector__pane pf-m-available">
    <div class="pf-v6-c-dual-list-selector__header">
      <div class="pf-v6-c-dual-list-selector__title">
        <div class="pf-v6-c-dual-list-selector__title-text">Available options</div>
      </div>
    </div>
    <div class="pf-v6-c-dual-list-selector__tools">
      <div class="pf-v6-c-dual-list-selector__tools-filter">
        <div class="pf-v6-c-text-input-group">
          <div class="pf-v6-c-text-input-group__main pf-m-icon">
            <span class="pf-v6-c-text-input-group__text">
              <span class="pf-v6-c-text-input-group__icon">
                <i class="fas fa-fw fa-search"></i>
              </span>
              <input
                class="pf-v6-c-text-input-group__text-input"
                type="text"
                value
                aria-label="Search input"
              />
            </span>
          </div>
        </div>
      </div>
      <div class="pf-v6-c-dual-list-selector__tools-actions">
        <button
          class="pf-v6-c-button pf-m-plain"
          type="button"
          aria-label="Sort"
        >
          <span class="pf-v6-c-button__icon pf-m-start">
            <i
              class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
              aria-hidden="true"
            ></i>
          </span>
        </button>
        <button
          class="pf-v6-c-menu-toggle pf-m-plain"
          type="button"
          aria-expanded="false"
          aria-label="Dual list item menu toggle"
          id="multiple-available-items-selected-available-menu-toggle"
        >
          <span class="pf-v6-c-menu-toggle__icon">
            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
          </span>
        </button>
      </div>
    </div>
    <div class="pf-v6-c-dual-list-selector__status">
      <span
        class="pf-v6-c-dual-list-selector__status-text"
        id="multiple-available-items-selected-available-status-text"
      >3 of 5 items selected</span>
    </div>
    <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
      <ul
        class="pf-v6-c-dual-list-selector__list"
        role="listbox"
        aria-labelledby="multiple-available-items-selected-available-status-text"
        aria-multiselectable="true"
        aria-activedescendant
      >
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item1</span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-selected">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item2</span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-selected">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item3</span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item4</span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-selected">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item5</span>
              </span>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="pf-v6-c-dual-list-selector__controls">
    <div class="pf-v6-c-dual-list-selector__controls-item">
      <button
        class="pf-v6-c-button pf-m-plain"
        type="button"
        aria-label="Add selected"
      >
        <span class="pf-v6-c-button__icon">
          <i class="fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <div class="pf-v6-c-dual-list-selector__controls-item">
      <button
        class="pf-v6-c-button pf-m-plain"
        type="button"
        aria-label="Add all"
      >
        <span class="pf-v6-c-button__icon">
          <i class="fas fa-angle-double-right fa-fw" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <div class="pf-v6-c-dual-list-selector__controls-item">
      <button
        class="pf-v6-c-button pf-m-plain"
        type="button"
        disabled
        aria-label="Remove all"
      >
        <span class="pf-v6-c-button__icon">
          <i class="fas fa-angle-double-left fa-fw" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <div class="pf-v6-c-dual-list-selector__controls-item">
      <button
        class="pf-v6-c-button pf-m-plain"
        type="button"
        disabled
        aria-label="Remove selected"
      >
        <span class="pf-v6-c-button__icon">
          <i class="fas fa-angle-left fa-fw" aria-hidden="true"></i>
        </span>
      </button>
    </div>
  </div>
  <div class="pf-v6-c-dual-list-selector__pane pf-m-chosen">
    <div class="pf-v6-c-dual-list-selector__header">
      <div class="pf-v6-c-dual-list-selector__title">
        <div class="pf-v6-c-dual-list-selector__title-text">Chosen options</div>
      </div>
    </div>
    <div class="pf-v6-c-dual-list-selector__tools">
      <div class="pf-v6-c-dual-list-selector__tools-filter">
        <div class="pf-v6-c-text-input-group">
          <div class="pf-v6-c-text-input-group__main pf-m-icon">
            <span class="pf-v6-c-text-input-group__text">
              <span class="pf-v6-c-text-input-group__icon">
                <i class="fas fa-fw fa-search"></i>
              </span>
              <input
                class="pf-v6-c-text-input-group__text-input"
                type="text"
                value
                aria-label="Search input"
              />
            </span>
          </div>
        </div>
      </div>
      <div class="pf-v6-c-dual-list-selector__tools-actions">
        <button
          class="pf-v6-c-button pf-m-plain"
          type="button"
          aria-label="Sort"
        >
          <span class="pf-v6-c-button__icon pf-m-start">
            <i
              class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
              aria-hidden="true"
            ></i>
          </span>
        </button>
        <button
          class="pf-v6-c-menu-toggle pf-m-plain"
          type="button"
          aria-expanded="false"
          aria-label="Dual list item menu toggle"
          id="multiple-available-items-selected-chosen-menu-toggle"
        >
          <span class="pf-v6-c-menu-toggle__icon">
            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
          </span>
        </button>
      </div>
    </div>
    <div class="pf-v6-c-dual-list-selector__status">
      <span
        class="pf-v6-c-dual-list-selector__status-text"
        id="multiple-available-items-selected-chosen-status-text"
      >0 of 0 items selected</span>
    </div>
    <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
      <ul
        class="pf-v6-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-v6-c-dual-list-selector">
  <div class="pf-v6-c-dual-list-selector__pane pf-m-available">
    <div class="pf-v6-c-dual-list-selector__header">
      <div class="pf-v6-c-dual-list-selector__title">
        <div class="pf-v6-c-dual-list-selector__title-text">Available options</div>
      </div>
    </div>
    <div class="pf-v6-c-dual-list-selector__tools">
      <div class="pf-v6-c-dual-list-selector__tools-filter">
        <div class="pf-v6-c-text-input-group">
          <div class="pf-v6-c-text-input-group__main pf-m-icon">
            <span class="pf-v6-c-text-input-group__text">
              <span class="pf-v6-c-text-input-group__icon">
                <i class="fas fa-fw fa-search"></i>
              </span>
              <input
                class="pf-v6-c-text-input-group__text-input"
                type="text"
                value
                aria-label="Search input"
              />
            </span>
          </div>
        </div>
      </div>
      <div class="pf-v6-c-dual-list-selector__tools-actions">
        <button
          class="pf-v6-c-button pf-m-plain"
          type="button"
          aria-label="Sort"
        >
          <span class="pf-v6-c-button__icon pf-m-start">
            <i
              class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
              aria-hidden="true"
            ></i>
          </span>
        </button>
        <button
          class="pf-v6-c-menu-toggle pf-m-plain"
          type="button"
          aria-expanded="false"
          aria-label="Dual list item menu toggle"
          id="chosen-item-available-menu-toggle"
        >
          <span class="pf-v6-c-menu-toggle__icon">
            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
          </span>
        </button>
      </div>
    </div>
    <div class="pf-v6-c-dual-list-selector__status">
      <span
        class="pf-v6-c-dual-list-selector__status-text"
        id="chosen-item-available-status-text"
      >0 of 4 items selected</span>
    </div>
    <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
      <ul
        class="pf-v6-c-dual-list-selector__list"
        role="listbox"
        aria-labelledby="chosen-item-available-status-text"
        aria-multiselectable="true"
        aria-activedescendant
      >
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item1</span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item2</span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item3</span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item4</span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item5</span>
              </span>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="pf-v6-c-dual-list-selector__controls">
    <div class="pf-v6-c-dual-list-selector__controls-item">
      <button
        class="pf-v6-c-button pf-m-plain"
        type="button"
        disabled
        aria-label="Add selected"
      >
        <span class="pf-v6-c-button__icon">
          <i class="fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <div class="pf-v6-c-dual-list-selector__controls-item">
      <button
        class="pf-v6-c-button pf-m-plain"
        type="button"
        aria-label="Add all"
      >
        <span class="pf-v6-c-button__icon">
          <i class="fas fa-angle-double-right fa-fw" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <div class="pf-v6-c-dual-list-selector__controls-item">
      <button
        class="pf-v6-c-button pf-m-plain"
        type="button"
        aria-label="Remove all"
      >
        <span class="pf-v6-c-button__icon">
          <i class="fas fa-angle-double-left fa-fw" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <div class="pf-v6-c-dual-list-selector__controls-item">
      <button
        class="pf-v6-c-button pf-m-plain"
        type="button"
        disabled
        aria-label="Remove selected"
      >
        <span class="pf-v6-c-button__icon">
          <i class="fas fa-angle-left fa-fw" aria-hidden="true"></i>
        </span>
      </button>
    </div>
  </div>
  <div class="pf-v6-c-dual-list-selector__pane pf-m-chosen">
    <div class="pf-v6-c-dual-list-selector__header">
      <div class="pf-v6-c-dual-list-selector__title">
        <div class="pf-v6-c-dual-list-selector__title-text">Chosen options</div>
      </div>
    </div>
    <div class="pf-v6-c-dual-list-selector__tools">
      <div class="pf-v6-c-dual-list-selector__tools-filter">
        <div class="pf-v6-c-text-input-group">
          <div class="pf-v6-c-text-input-group__main pf-m-icon">
            <span class="pf-v6-c-text-input-group__text">
              <span class="pf-v6-c-text-input-group__icon">
                <i class="fas fa-fw fa-search"></i>
              </span>
              <input
                class="pf-v6-c-text-input-group__text-input"
                type="text"
                value
                aria-label="Search input"
              />
            </span>
          </div>
        </div>
      </div>
      <div class="pf-v6-c-dual-list-selector__tools-actions">
        <button
          class="pf-v6-c-button pf-m-plain"
          type="button"
          aria-label="Sort"
        >
          <span class="pf-v6-c-button__icon pf-m-start">
            <i
              class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
              aria-hidden="true"
            ></i>
          </span>
        </button>
        <button
          class="pf-v6-c-menu-toggle pf-m-plain"
          type="button"
          aria-expanded="false"
          aria-label="Dual list item menu toggle"
          id="chosen-item-chosen-menu-toggle"
        >
          <span class="pf-v6-c-menu-toggle__icon">
            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
          </span>
        </button>
      </div>
    </div>
    <div class="pf-v6-c-dual-list-selector__status">
      <span
        class="pf-v6-c-dual-list-selector__status-text"
        id="chosen-item-chosen-status-text"
      >0 of 1 items selected</span>
    </div>
    <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
      <ul
        class="pf-v6-c-dual-list-selector__list"
        role="listbox"
        aria-labelledby="chosen-item-chosen-status-text"
        aria-multiselectable="true"
        aria-activedescendant
      >
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item1</span>
              </span>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

```

### Chosen item selected

```html
<div class="pf-v6-c-dual-list-selector">
  <div class="pf-v6-c-dual-list-selector__pane pf-m-available">
    <div class="pf-v6-c-dual-list-selector__header">
      <div class="pf-v6-c-dual-list-selector__title">
        <div class="pf-v6-c-dual-list-selector__title-text">Available options</div>
      </div>
    </div>
    <div class="pf-v6-c-dual-list-selector__tools">
      <div class="pf-v6-c-dual-list-selector__tools-filter">
        <div class="pf-v6-c-text-input-group">
          <div class="pf-v6-c-text-input-group__main pf-m-icon">
            <span class="pf-v6-c-text-input-group__text">
              <span class="pf-v6-c-text-input-group__icon">
                <i class="fas fa-fw fa-search"></i>
              </span>
              <input
                class="pf-v6-c-text-input-group__text-input"
                type="text"
                value
                aria-label="Search input"
              />
            </span>
          </div>
        </div>
      </div>
      <div class="pf-v6-c-dual-list-selector__tools-actions">
        <button
          class="pf-v6-c-button pf-m-plain"
          type="button"
          aria-label="Sort"
        >
          <span class="pf-v6-c-button__icon pf-m-start">
            <i
              class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
              aria-hidden="true"
            ></i>
          </span>
        </button>
        <button
          class="pf-v6-c-menu-toggle pf-m-plain"
          type="button"
          aria-expanded="false"
          aria-label="Dual list item menu toggle"
          id="chosen-item-selected-available-menu-toggle"
        >
          <span class="pf-v6-c-menu-toggle__icon">
            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
          </span>
        </button>
      </div>
    </div>
    <div class="pf-v6-c-dual-list-selector__status">
      <span
        class="pf-v6-c-dual-list-selector__status-text"
        id="chosen-item-selected-available-status-text"
      >0 of 4 items selected</span>
    </div>
    <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
      <ul
        class="pf-v6-c-dual-list-selector__list"
        role="listbox"
        aria-labelledby="chosen-item-selected-available-status-text"
        aria-multiselectable="true"
        aria-activedescendant
      >
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item1</span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item2</span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item3</span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item4</span>
              </span>
            </span>
          </div>
        </li>
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item5</span>
              </span>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="pf-v6-c-dual-list-selector__controls">
    <div class="pf-v6-c-dual-list-selector__controls-item">
      <button
        class="pf-v6-c-button pf-m-plain"
        type="button"
        disabled
        aria-label="Add selected"
      >
        <span class="pf-v6-c-button__icon">
          <i class="fas fa-angle-right fa-fw" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <div class="pf-v6-c-dual-list-selector__controls-item">
      <button
        class="pf-v6-c-button pf-m-plain"
        type="button"
        aria-label="Add all"
      >
        <span class="pf-v6-c-button__icon">
          <i class="fas fa-angle-double-right fa-fw" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <div class="pf-v6-c-dual-list-selector__controls-item">
      <button
        class="pf-v6-c-button pf-m-plain"
        type="button"
        aria-label="Remove all"
      >
        <span class="pf-v6-c-button__icon">
          <i class="fas fa-angle-double-left fa-fw" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <div class="pf-v6-c-dual-list-selector__controls-item">
      <button
        class="pf-v6-c-button pf-m-plain"
        type="button"
        aria-label="Remove selected"
      >
        <span class="pf-v6-c-button__icon">
          <i class="fas fa-angle-left fa-fw" aria-hidden="true"></i>
        </span>
      </button>
    </div>
  </div>
  <div class="pf-v6-c-dual-list-selector__pane pf-m-chosen">
    <div class="pf-v6-c-dual-list-selector__header">
      <div class="pf-v6-c-dual-list-selector__title">
        <div class="pf-v6-c-dual-list-selector__title-text">Chosen options</div>
      </div>
    </div>
    <div class="pf-v6-c-dual-list-selector__tools">
      <div class="pf-v6-c-dual-list-selector__tools-filter">
        <div class="pf-v6-c-text-input-group">
          <div class="pf-v6-c-text-input-group__main pf-m-icon">
            <span class="pf-v6-c-text-input-group__text">
              <span class="pf-v6-c-text-input-group__icon">
                <i class="fas fa-fw fa-search"></i>
              </span>
              <input
                class="pf-v6-c-text-input-group__text-input"
                type="text"
                value
                aria-label="Search input"
              />
            </span>
          </div>
        </div>
      </div>
      <div class="pf-v6-c-dual-list-selector__tools-actions">
        <button
          class="pf-v6-c-button pf-m-plain"
          type="button"
          aria-label="Sort"
        >
          <span class="pf-v6-c-button__icon pf-m-start">
            <i
              class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
              aria-hidden="true"
            ></i>
          </span>
        </button>
        <button
          class="pf-v6-c-menu-toggle pf-m-plain"
          type="button"
          aria-expanded="false"
          aria-label="Dual list item menu toggle"
          id="chosen-item-selected-chosen-menu-toggle"
        >
          <span class="pf-v6-c-menu-toggle__icon">
            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
          </span>
        </button>
      </div>
    </div>
    <div class="pf-v6-c-dual-list-selector__status">
      <span
        class="pf-v6-c-dual-list-selector__status-text"
        id="chosen-item-selected-chosen-status-text"
      >1 of 1 items selected</span>
    </div>
    <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
      <ul
        class="pf-v6-c-dual-list-selector__list"
        role="listbox"
        aria-labelledby="chosen-item-selected-chosen-status-text"
        aria-multiselectable="true"
        aria-activedescendant
      >
        <li class="pf-v6-c-dual-list-selector__list-item" role="option">
          <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-selected">
            <span class="pf-v6-c-dual-list-selector__item">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <span class="pf-v6-c-dual-list-selector__item-text">Item5</span>
              </span>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

```

### Tree view

```html
<div class="pf-v6-c-dual-list-selector">
  <div class="pf-v6-c-dual-list-selector__pane pf-m-available">
    <div class="pf-v6-c-dual-list-selector__header">
      <div class="pf-v6-c-dual-list-selector__title">
        <div class="pf-v6-c-dual-list-selector__title-text">Available options</div>
      </div>
    </div>
    <div class="pf-v6-c-dual-list-selector__tools">
      <div class="pf-v6-c-dual-list-selector__tools-filter">
        <div class="pf-v6-c-text-input-group">
          <div class="pf-v6-c-text-input-group__main pf-m-icon">
            <span class="pf-v6-c-text-input-group__text">
              <span class="pf-v6-c-text-input-group__icon">
                <i class="fas fa-fw fa-search"></i>
              </span>
              <input
                class="pf-v6-c-text-input-group__text-input"
                type="text"
                value
                aria-label="Search input"
              />
            </span>
          </div>
        </div>
      </div>
      <div class="pf-v6-c-dual-list-selector__tools-actions">
        <button
          class="pf-v6-c-button pf-m-plain"
          type="button"
          aria-label="Sort"
        >
          <span class="pf-v6-c-button__icon pf-m-start">
            <i
              class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
              aria-hidden="true"
            ></i>
          </span>
        </button>
        <button
          class="pf-v6-c-menu-toggle pf-m-plain"
          type="button"
          aria-expanded="false"
          aria-label="Dual list item menu toggle"
          id="tree-available-menu-toggle"
        >
          <span class="pf-v6-c-menu-toggle__icon">
            <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
          </span>
        </button>
      </div>
    </div>
    <div class="pf-v6-c-dual-list-selector__status">
      <span
        class="pf-v6-c-dual-list-selector__status-text"
        id="tree-available-status-text"
      >1 of 11 items selected</span>
    </div>
    <div class="pf-v6-c-dual-list-selector__menu" tabindex="0">
      <ul
        class="pf-v6-c-dual-list-selector__list"
        role="tree"
        aria-labelledby="tree-available-status-text"
        aria-multiselectable="true"
        aria-activedescendant
      >
        <li
          class="pf-v6-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
          aria-expanded="true"
          role="treeitem"
        >
          <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
            <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
              <span class="pf-v6-c-dual-list-selector__item-main">
                <div class="pf-v6-c-dual-list-selector__item-toggle">
                  <span class="pf-v6-c-dual-list-selector__item-toggle-icon">
                    <i class="fas fa-angle-right" aria-hidden="true"></i>
                  </span>
                </div>
                <span class="pf-v6-c-dual-list-selector__item-check">
                  <div class="pf-v6-c-check pf-m-standalone">
                    <input
                      class="pf-v6-c-check__input"
                      type="checkbox"
                      id="check-0"
                      aria-label="Dual list selector item check"
                    />
                  </div>
                </span>
                <span class="pf-v6-c-dual-list-selector__item-text">Colors</span>
              </span>
              <span class="pf-v6-c-dual-list-selector__item-count">
                <span class="pf-v6-c-badge pf-m-read">6</span>
              </span>
            </div>
          </div>

          <ul
            class="pf-v6-c-dual-list-selector__list"
            role="group"
            aria-labelledby="-status-text"
          >
            <li class="pf-v6-c-dual-list-selector__list-item" role="treeitem">
              <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
                <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
                  <span class="pf-v6-c-dual-list-selector__item-main">
                    <span class="pf-v6-c-dual-list-selector__item-check">
                      <div class="pf-v6-c-check pf-m-standalone">
                        <input
                          class="pf-v6-c-check__input"
                          type="checkbox"
                          id="check-1"
                          aria-label="Dual list selector item check"
                        />
                      </div>
                    </span>
                    <span class="pf-v6-c-dual-list-selector__item-text">Red</span>
                  </span>
                </div>
              </div>
            </li>
            <li class="pf-v6-c-dual-list-selector__list-item" role="treeitem">
              <div
                class="pf-v6-c-dual-list-selector__list-item-row pf-m-check pf-m-selected"
              >
                <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
                  <span class="pf-v6-c-dual-list-selector__item-main">
                    <span class="pf-v6-c-dual-list-selector__item-check">
                      <div class="pf-v6-c-check pf-m-standalone">
                        <input
                          class="pf-v6-c-check__input"
                          type="checkbox"
                          id="check-2"
                          checked
                          aria-label="Dual list selector item check checked"
                        />
                      </div>
                    </span>
                    <span class="pf-v6-c-dual-list-selector__item-text">Orange</span>
                  </span>
                </div>
              </div>
            </li>
            <li class="pf-v6-c-dual-list-selector__list-item" role="treeitem">
              <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
                <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
                  <span class="pf-v6-c-dual-list-selector__item-main">
                    <span class="pf-v6-c-dual-list-selector__item-check">
                      <div class="pf-v6-c-check pf-m-standalone">
                        <input
                          class="pf-v6-c-check__input"
                          type="checkbox"
                          id="check-3"
                          aria-label="Dual list selector item check"
                        />
                      </div>
                    </span>
                    <span class="pf-v6-c-dual-list-selector__item-text">Yellow</span>
                  </span>
                </div>
              </div>
            </li>
            <li
              class="pf-v6-c-dual-list-selector__list-item pf-m-expandable pf-m-expanded"
              aria-expanded="true"
              role="treeitem"
            >
              <div class="pf-v6-c-dual-list-selector__list-item-row pf-m-check">
                <div class="pf-v6-c-dual-list-selector__item" tabindex="0">
                  <span class="pf-v6-c-dual-list-selector__item-main">
                    <div class="pf-v6-c-dual-list-selector__item-toggle">
                      <span
                        class="pf-v6-c-dual-list-selector__item-toggle-icon"
                      >
                        <i class="fas fa-angle-right" aria-hidden="true"></i>
                      </span>
                    </div>
                    <span class="pf-v6-c-dual-list-selector__item-check">
                      <div