Summary
Create a <pf-v6-dual-list-selector> web component implementing the PatternFly v6 Dual list selector component.
Side-by-side lists allowing users to move items between available and chosen sets.
Prior Art
| Source |
Element |
Status |
| PFE v4 |
-- |
-- |
| cem |
-- |
-- |
| cockpit |
-- |
-- |
| chickadee |
<chickadee-dual-list-selector> |
Exists |
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with
@patternfly/react-core DualListSelector
- MAY adjust element API to leverage web platform strengths
- SHOULD maintain CSS custom property theming compatibility
- SHOULD expose useful CSS shadow parts
Element-specific considerations
- Sub-elements:
DualListSelectorPane, DualListSelectorList, DualListSelectorListItem, DualListSelectorControlsWrapper, DualListSelectorControl
- Left pane: available options; right pane: chosen options
- Filter/search input per pane (
searchInputPlaceholder, onFilterUpdate)
- Move controls: add selected, add all, remove selected, remove all (four buttons)
- Reorder controls: move up, move down (for chosen pane)
- Sort option per pane
isSearchable prop for filter inputs
- FACE not needed (no native form value), but
value property for current chosen set
DualListSelectorListItem: isSelected, onOptionSelect
- Keyboard: Space to select/deselect items, Enter/click buttons to move; standard list navigation
role="listbox" with aria-multiselectable="true" per pane, items role="option" with aria-selected
Checklist
Implementation
Demos
Tests
Reviews
Ship
Summary
Create a
<pf-v6-dual-list-selector>web component implementing the PatternFly v6 Dual list selector component.Side-by-side lists allowing users to move items between available and chosen sets.
Prior Art
<chickadee-dual-list-selector>Requirements
@patternfly/react-coreDualListSelectorElement-specific considerations
DualListSelectorPane,DualListSelectorList,DualListSelectorListItem,DualListSelectorControlsWrapper,DualListSelectorControlsearchInputPlaceholder,onFilterUpdate)isSearchableprop for filter inputsvalueproperty for current chosen setDualListSelectorListItem:isSelected,onOptionSelectrole="listbox"witharia-multiselectable="true"per pane, itemsrole="option"witharia-selectedChecklist
Implementation
.claude/ADVICE.md@summaryand JSDoc on element classDemos
Tests
a11ySnapshotassertionsReviews
/review-apipasses/review-demospasses/review-a11ypasseseslintandstylelintpassShip
staging/pfv6(NOTmain)