Dual list selector

A dual list selector displays 2 interactive lists: a list of selected items and a list of available, selectable items. Users can move items between the lists.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__header--GridArea
pane-header
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__tools--GridArea
pane-tools
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__status--GridArea
pane-status
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__menu--GridArea
pane-menu
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__controls--GridArea
controls
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector--m-chosen__header--GridArea
pane-header-c
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector--m-chosen__tools--GridArea
pane-tools-c
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector--m-chosen__status--GridArea
pane-status-c
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector--m-chosen__menu--GridArea
pane-menu-c
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min
12.5rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max
28.125rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__header--MarginBlockEnd
0.5rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__title-text--FontWeight
600
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__title-text--FontSize
1rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__tools--MarginBlockEnd
1rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__tools-filter--tools-actions--MarginInlineStart
0.5rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__menu--BorderWidth
1px
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__menu--BorderColor
(In light theme) #e0e0e0
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__menu--BorderRadius
6px
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__menu--MinHeight
12.5rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__menu--MaxHeight
20rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__menu--MarginBlockStart
1rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide
0s
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list--TransitionDuration--expand--fade
200ms
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide
0s
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--fade
100ms
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list--TransitionDuration--slide
0s
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list--TransitionDuration--fade
100ms
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list--TransitionTimingFunction
cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list--Opacity
0
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector--m-expanded__list--Opacity
1
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list--TranslateY
0
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector--m-expanded__list--TranslateY
0
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list-item-row--FontSize
0.875rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list-item-row--BorderWidth
0px
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list-item-row--BorderColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list-item-row--hover--BorderWidth
0px
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list-item-row--m-selected--BorderWidth
0px
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list-item--m-ghost-row--Opacity
.4
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__item--PaddingBlockStart
0.5rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__item--PaddingInlineEnd
1rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__item--PaddingBlockEnd
0.5rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__item--PaddingInlineStart
1rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart
1rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__item--indent--base
calc(1rem + 0.5rem + 0.875rem)
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__item--nested-indent--base
calc(calc(1rem + 0.5rem + 0.875rem) - 1rem)
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__draggable--item--PaddingInlineStart
0.25rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__item-text--Color
(In light theme) #4d4d4d
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list-item-row--m-selected__text--Color
(In light theme) #151515
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list-item--m-disabled__item-text--Color
(In light theme) #a3a3a3
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__status--MarginBlockEnd
0.5rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__status-text--FontSize
0.875rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__status-text--Color
(In light theme) #4d4d4d
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__controls--PaddingInlineEnd
1rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__controls--PaddingInlineStart
1rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__controls--Gap
0.25rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__controls--MarginBlockStart
1rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__item-toggle--PaddingInlineEnd
0.5rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart
0
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX
-100%
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__item-check--MarginInlineEnd
0.5rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__item-count--MarginInlineStart
0.5rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor
(In light theme) #e0e0e0
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate
0
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate
90deg
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration
100ms
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction
cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth
0.875rem
.pf-v6-c-dual-list-selector--pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color
(In light theme) #a3a3a3
.pf-v6-c-dual-list-selector__pane.pf-m-chosen--pf-v6-c-dual-list-selector__header--GridArea
pane-header-c
.pf-v6-c-dual-list-selector__pane.pf-m-chosen--pf-v6-c-dual-list-selector__tools--GridArea
pane-tools-c
.pf-v6-c-dual-list-selector__pane.pf-m-chosen--pf-v6-c-dual-list-selector__status--GridArea
pane-status-c
.pf-v6-c-dual-list-selector__pane.pf-m-chosen--pf-v6-c-dual-list-selector__menu--GridArea
pane-menu-c
.pf-v6-c-dual-list-selector__list--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate
0
.pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list--pf-v6-c-dual-list-selector__item-toggle--MarginBlockStart
0
.pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list--pf-v6-c-dual-list-selector__item-toggle--MarginBlockEnd
0
.pf-v6-c-dual-list-selector__list-item:focus-visible--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-dual-list-selector__list-item.pf-m-expandable--pf-v6-c-dual-list-selector__item--PaddingInlineStart
1rem
.pf-v6-c-dual-list-selector__list-item.pf-m-expanded--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate
90deg
.pf-v6-c-dual-list-selector__list-item.pf-m-disabled--pf-v6-c-dual-list-selector__item-text--Color
(In light theme) #a3a3a3
.pf-v6-c-dual-list-selector__list-item.pf-m-disabled--pf-v6-c-dual-list-selector__item-toggle-icon--Color
(In light theme) #a3a3a3
.pf-v6-c-dual-list-selector__list-item-row.pf-m-selected--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-dual-list-selector__list-item-row.pf-m-selected--pf-v6-c-dual-list-selector__list-item-row--BorderWidth
0px
.pf-v6-c-dual-list-selector__list-item-row.pf-m-selected .pf-v6-c-dual-list-selector__item-text--pf-v6-c-dual-list-selector__item-text--Color
(In light theme) #151515
.pf-v6-c-dual-list-selector__list-item-row:hover--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-dual-list-selector__list-item-row:hover--pf-v6-c-dual-list-selector__list-item-row--BorderWidth
0px
.pf-v6-c-dual-list-selector__list-item-row.pf-m-check--pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor
transparent
.pf-v6-c-dual-list-selector__list-item-row.pf-m-check--pf-v6-c-dual-list-selector__list-item-row--m-selected--BorderWidth
0
.pf-v6-c-dual-list-selector__list-item-row.pf-m-ghost-row--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-dual-list-selector__draggable + .pf-v6-c-dual-list-selector__item--pf-v6-c-dual-list-selector__item--PaddingInlineStart
0.25rem
.pf-v6-c-dual-list-selector__draggable .pf-v6-c-button--pf-v6-c-button--FontSize
inherit
.pf-v6-c-dual-list-selector__item-count .pf-v6-c-badge.pf-m-read--pf-v6-c-badge--m-read--BackgroundColor
(In light theme) #e0e0e0
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item--pf-v6-c-dual-list-selector__item--PaddingInlineStart
calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 1 + calc(1rem + 0.5rem + 0.875rem))
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart
1rem
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item--pf-v6-c-dual-list-selector__item--PaddingInlineStart
calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 2 + calc(1rem + 0.5rem + 0.875rem))
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart
1rem
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item--pf-v6-c-dual-list-selector__item--PaddingInlineStart
calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 3 + calc(1rem + 0.5rem + 0.875rem))
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart
1rem
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item--pf-v6-c-dual-list-selector__item--PaddingInlineStart
calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 4 + calc(1rem + 0.5rem + 0.875rem))
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart
1rem
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item--pf-v6-c-dual-list-selector__item--PaddingInlineStart
calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 5 + calc(1rem + 0.5rem + 0.875rem))
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart
1rem
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item--pf-v6-c-dual-list-selector__item--PaddingInlineStart
calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 6 + calc(1rem + 0.5rem + 0.875rem))
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart
1rem
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item--pf-v6-c-dual-list-selector__item--PaddingInlineStart
calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 7 + calc(1rem + 0.5rem + 0.875rem))
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart
1rem
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item--pf-v6-c-dual-list-selector__item--PaddingInlineStart
calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 8 + calc(1rem + 0.5rem + 0.875rem))
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart
1rem
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item--pf-v6-c-dual-list-selector__item--PaddingInlineStart
calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 9 + calc(1rem + 0.5rem + 0.875rem))
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart
1rem
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item--pf-v6-c-dual-list-selector__item--PaddingInlineStart
calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 10 + calc(1rem + 0.5rem + 0.875rem))
.pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item .pf-v6-c-dual-list-selector__list-item--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart
1rem