--- id: 'Dual list selector' section: components cssPrefix: pf-v5-c-dual-list-selector ---## Examples ### Basic ```html
Available options
0 of 5 items selected
  • Item1
  • Item2
  • Item3 (disabled)
  • Item4
  • Item5
Chosen options
0 of 0 items selected
    ``` ### Available item selected ```html
    Available options
    1 of 5 items selected
    • Item1
    • Item2
    • Item3
    • Item4
    • Item5
    Chosen options
    0 of 0 items selected
      ``` ### Multiple available items selected ```html
      Available options
      3 of 5 items selected
      • Item1
      • Item2
      • Item3
      • Item4
      • Item5
      Chosen options
      0 of 0 items selected
        ``` ### Chosen item ```html
        Available options
        0 of 4 items selected
        • Item1
        • Item2
        • Item3
        • Item4
        • Item5
        Chosen options
        0 of 1 items selected
        • Item1
        ``` ### Chosen item selected ```html
        Available options
        0 of 4 items selected
        • Item1
        • Item2
        • Item3
        • Item4
        • Item5
        Chosen options
        1 of 1 items selected
        • Item5
        ``` ### Tree view ```html
        Available options
        1 of 11 items selected
        • Colors           6
          • Red
          • Orange
          • Yellow
          • Green
            • Light green
            • Medium green
            • Dark green
        • Type something
        • Type something
        • Type something
        Chosen options
        0 of 0 items selected
          ``` ### Tree view with chosen and disabled options ```html
          Available options
          0 of 10 items selected
          • Colors             6
            • Orange
            • Yellow
            • Green (disabled)
              • Light green
              • Medium green
              • Dark green
          • Type something
          • Type something
          • Type something
          Chosen options
          0 of 0 items selected
          • Colors
            • Orange
          ``` ### Draggable ```html
          Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering.
          Available options
          0 of 5 items selected
          • Item1
          • Item4
          • Item6
          Chosen options
          0 of 0 items selected
          • Item2 - draggable icon disabled
          • Item3
          • Item5 - ghost row
          • Item7 - selected
          This is the aria-live section that provides real-time feedback to the user.
          ``` ## Documentation ### Accessibility | Attribute | Applied to | Outcome | | -- | -- | -- | | `aria-live` | `[element with live text]` | To give screen reader users live feedback about what's happening during interaction with the dual list selector, both during drag and drop interactions and keyboard interactions. **Highly Recommended** | | `aria-labelledby="[id of .pf-v5-c-dual-list-selector__status-text]` | `.pf-v5-c-dual-list-selector__list [ul]` | Gives the list an accessible name. | | `role="listbox or tree or group"` | `.pf-v5-c-dual-list-selector__list [ul]` | Indicates the list is single, a tree, or a subgroup within the tree. | | `aria-multiselectable="true"` | `.pf-v5-c-dual-list-selector__list [ul]` | Indicates the list is multiselectable. | | `aria-activedescendant=""` | `.pf-v5-c-dual-list-selector__list [ul]` | Indicates the list has clickable children. | | `role="option or treeitem"` | `.pf-v5-c-dual-list-selector__list-item [li]` | Indicates whether the item is part of a tree. | | `aria-expanded="true"` | `.pf-v5-c-dual-list-selector__list-item [li]` | Indicates a treeitem is expanded. | ### Usage | Class | Applied | Outcome | | -- | -- | -- | | `.pf-v5-c-dual-list-selector` | `
          ` | Initiates the dual list selector component. **Required** | | `.pf-v5-c-dual-list-selector__pane` | `
          ` | Initiates a dual list selector pane. **Required** | | `.pf-v5-c-dual-list-selector__header` | `
          ` | Initiates a dual list selector pane header. **Required** | | `.pf-v5-c-dual-list-selector__title` | `
          ` | Initiates a dual list selector pane title. **Required** | | `.pf-v5-c-dual-list-selector__title-text` | `
          ` | Initiates a dual list selector pane title text. **Required** | | `.pf-v5-c-dual-list-selector__tools` | `
          ` | Initiates a dual list selector tools. **Required** | | `.pf-v5-c-dual-list-selector__filter` | `
          ` | Initiates a dual list selector pane filter. **Required** | | `.pf-v5-c-dual-list-selector__actions` | `
          ` | Initiates a dual list selector pane actions. | | `.pf-v5-c-dual-list-selector__actions-item` | `
          ` | Initiates a dual list selector pane actions item. | | `.pf-v5-c-dual-list-selector__status` | `
          ` | Initiates a dual list selector pane selected status. **Required** | | `.pf-v5-c-dual-list-selector__status-text` | `` | Initiates a dual list selector pane selected status text. **Required** | | `.pf-v5-c-dual-list-selector__menu` | `
          ` | Initiates a dual list selector pane menu container. **Required** | | `.pf-v5-c-dual-list-selector__list` | `
            ` | Initiates a dual list selector pane menu list. **Required** | | `.pf-v5-c-dual-list-selector__list-item` | `
          • ` | Initiates a dual list selector pane menu list item. **Required** | | `.pf-v5-c-dual-list-selector__list-item-row` | `
            ` | Initiates a dual list selector pane menu list item row. **Required** | | `.pf-v5-c-dual-list-selector__draggable` | `
            ` | Initiates a dual list selector pane draggable element. | | `.pf-v5-c-dual-list-selector__item` | ``, `
            ` | Initiates a dual list selector pane menu item. **Required** | | `.pf-v5-c-dual-list-selector__item-main` | `` | Initiates a dual list selector pane menu item main container. **Required** | | `.pf-v5-c-dual-list-selector__item-check` | `` | Initiates the dual list selector item check. | | `.pf-v5-c-dual-list-selector__item-count` | `` | Initiates the dual list selector item count. | | `.pf-v5-c-dual-list-selector__item-toggle-icon` | `` | Initiates the dual list selector item toggle icon. | | `.pf-v5-c-dual-list-selector__item-toggle` | `