--- id: 'Dual list selector' beta: true section: components cssPrefix: pf-c-dual-list-selector ---## Examples ### Basic ```html

0 of 5 items selected

0 of 0 items selected

``` ### Available item selected ```html

1 of 5 items selected

0 of 0 items selected

``` ### Multiple available items selected ```html

1 of 5 items selected

0 of 0 items selected

``` ### Chosen item ```html

0 of 4 items selected

0 of 1 items selected

``` ### Chosen item selected ```html

0 of 4 items selected

1 of 1 items selected

``` ### Tree view ```html ``` ### Tree view with chosen and disabled options ```html ``` ### 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.

0 of 5 items selected

0 of 0 items selected

``` ## Documentation ### Accessibility | Attribute | Applied to | Outcome | | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `aria-pressed="true or false"` | `.pf-c-dual-list-selector__draggable .pf-c-button` | Indicates whether the button is currently pressed or not. | | `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-describedby="[id value of applicable content]"` | `.pf-c-dual-list-selector__draggable .pf-c-button` | Gives the draggable button an accessible description by referring to the textual content that describes how to use the button to drag elements. **Highly recommended** | | `aria-labelledby="[id of .pf-c-dual-list-selector__draggable .pf-c-button] [id of item text]"` | `.pf-c-table__dual-list-selector .pf-c-button` | Provides an accessible name for the draggable button. | | `id="[]"` | `.pf-c-dual-list-selector__draggable .pf-c-button`, `[item text]`, `.pf-c-dual-list-selector__status-text` | Gives the button and the text element accessible IDs. | | `aria-labelledby="[id of .pf-c-dual-list-selector__status-text]` | `.pf-c-dual-list-selector__list [ul]` | Gives the list an accessible name. | | `role="listbox or tree or group"` | `.pf-c-dual-list-selector__list [ul]` | Indicates the list is single, a tree, or a subgroup within the tree. | | `aria-multiselectable="true"` | `.pf-c-dual-list-selector__list [ul]` | Indicates the list is multiselectable. | | `aria-activedescendant=""` | `.pf-c-dual-list-selector__list [ul]` | Indicates the list has clickable children. | | `role="option or treeitem"` | `.pf-c-dual-list-selector__list-item [li]` | Indicates whether the item is part of a tree. | | `aria-expanded="true"` | `.pf-c-dual-list-selector__list-item [li]` | Indicates a treeitem is expanded. | ### Usage | Class | Applied | Outcome | | -------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | | `.pf-c-dual-list-selector` | `

` | Initiates the dual list selector component. **Required** | | `.pf-c-dual-list-selector__pane` | `

` | Initiates a dual list selector pane. **Required** | | `.pf-c-dual-list-selector__header` | `

` | Initiates a dual list selector pane header. **Required** | | `.pf-c-dual-list-selector__title` | `

` | Initiates a dual list selector pane title. **Required** | | `.pf-c-dual-list-selector__title-text` | `

` | Initiates a dual list selector pane title text. **Required** | | `.pf-c-dual-list-selector__tools` | `

` | Initiates a dual list selector tools. **Required** | | `.pf-c-dual-list-selector__filter` | `

` | Initiates a dual list selector pane filter. **Required** | | `.pf-c-dual-list-selector__actions` | `

` | Initiates a dual list selector pane actions. | | `.pf-c-dual-list-selector__actions-item` | `

` | Initiates a dual list selector pane actions item. | | `.pf-c-dual-list-selector__status` | `

` | Initiates a dual list selector pane selected status. **Required** | | `.pf-c-dual-list-selector__status-text` | `` | Initiates a dual list selector pane selected status text. **Required** | | `.pf-c-dual-list-selector__menu` | `

` | Initiates a dual list selector pane menu container. **Required** | | `.pf-c-dual-list-selector__list` | `

` | Initiates a dual list selector pane menu list item. **Required** | | `.pf-c-dual-list-selector__list-item-row` | `
` | Initiates a dual list selector pane menu list item row. **Required** | | `.pf-c-dual-list-selector__draggable` | `
` | Initiates a dual list selector pane draggable element. | | `.pf-c-dual-list-selector__item` | ``, `
` | Initiates a dual list selector pane menu item. **Required** | | `.pf-c-dual-list-selector__item-main` | `` | Initiates a dual list selector pane menu item main container. **Required** | | `.pf-c-dual-list-selector__item-check` | `` | Initiates the dual list selector item check. | | `.pf-c-dual-list-selector__item-count` | `` | Initiates the dual list selector item count. | | `.pf-c-dual-list-selector__item-toggle-icon` | `` | Initiates the dual list selector item toggle icon. | | `.pf-c-dual-list-selector__item-toggle` | `