Dual list selector

Examples

Basic

0 of 5 items selected

0 of 0 items selected

Available item selected

1 of 5 items selected

0 of 0 items selected

Multiple available items selected

3 of 5 items selected

0 of 0 items selected

Chosen item

0 of 4 items selected

0 of 1 items selected

Chosen item selected

0 of 4 items selected

1 of 1 items selected

Draggable

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-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-v6-c-dual-list-selector__status-text]`	`.pf-v6-c-dual-list-selector__list [ul]`	Gives the list an accessible name.
`role="listbox or tree or group"`	`.pf-v6-c-dual-list-selector__list [ul]`	Indicates the list is single, a tree, or a subgroup within the tree.
`aria-multiselectable="true"`	`.pf-v6-c-dual-list-selector__list [ul]`	Indicates the list is multiselectable.
`aria-activedescendant=""`	`.pf-v6-c-dual-list-selector__list [ul]`	Indicates the list has clickable children.
`role="option or treeitem"`	`.pf-v6-c-dual-list-selector__list-item [li]`	Indicates whether the item is part of a tree.
`aria-expanded="true"`	`.pf-v6-c-dual-list-selector__list-item [li]`	Indicates a treeitem is expanded.

Usage

Class	Applied	Outcome
`.pf-v6-c-dual-list-selector`	`<div>`	Initiates the dual list selector component. Required
`.pf-v6-c-dual-list-selector__pane`	`<div>`	Initiates a dual list selector pane. Required
`.pf-v6-c-dual-list-selector__header`	`<div>`	Initiates a dual list selector pane header. Required
`.pf-v6-c-dual-list-selector__title`	`<div>`	Initiates a dual list selector pane title. Required
`.pf-v6-c-dual-list-selector__title-text`	`<div>`	Initiates a dual list selector pane title text. Required
`.pf-v6-c-dual-list-selector__tools`	`<div>`	Initiates a dual list selector tools. Required
`.pf-v6-c-dual-list-selector__filter`	`<div>`	Initiates a dual list selector pane filter. Required
`.pf-v6-c-dual-list-selector__actions`	`<div>`	Initiates a dual list selector pane actions.
`.pf-v6-c-dual-list-selector__actions-item`	`<div>`	Initiates a dual list selector pane actions item.
`.pf-v6-c-dual-list-selector__status`	`<div>`	Initiates a dual list selector pane selected status. Required
`.pf-v6-c-dual-list-selector__status-text`	`<span>`	Initiates a dual list selector pane selected status text. Required
`.pf-v6-c-dual-list-selector__menu`	`<div>`	Initiates a dual list selector pane menu container. Required
`.pf-v6-c-dual-list-selector__list`	`<ul>`	Initiates a dual list selector pane menu list. Required
`.pf-v6-c-dual-list-selector__list-item`	`<li>`	Initiates a dual list selector pane menu list item. Required
`.pf-v6-c-dual-list-selector__list-item-row`	`<div>`	Initiates a dual list selector pane menu list item row. Required
`.pf-v6-c-dual-list-selector__draggable`	`<div>`	Initiates a dual list selector pane draggable element.
`.pf-v6-c-dual-list-selector__item`	`<span>`, `<div>`	Initiates a dual list selector pane menu item. Required
`.pf-v6-c-dual-list-selector__item-main`	`<span>`	Initiates a dual list selector pane menu item main container. Required
`.pf-v6-c-dual-list-selector__item-check`	`<span>`	Initiates the dual list selector item check.
`.pf-v6-c-dual-list-selector__item-count`	`<span>`	Initiates the dual list selector item count.
`.pf-v6-c-dual-list-selector__item-toggle-icon`	`<span>`	Initiates the dual list selector item toggle icon.
`.pf-v6-c-dual-list-selector__item-toggle`	`<button>`	Initiates the dual list selector item toggle.
`.pf-v6-c-dual-list-selector__item-text`	`<span>`	Initiates a dual list selector pane menu item text. Required
`.pf-v6-c-dual-list-selector__controls`	`<div>`	Initiates the dual list selector controls. Required
`.pf-v6-c-dual-list-selector__controls-item`	`<div>`	Initiates the dual list selector controls item. Required
`.pf-m-animate-expand`	`.pf-v6-c-dual-list-selector`	Animates the expansion of dual list selector tree view.
`.pf-m-available`	`.pf-v6-c-dual-list-selector__pane`	Defines a pane as the available list.
`.pf-m-chosen`	`.pf-v6-c-dual-list-selector__pane`	Defines a pane as the chosen list.
`.pf-m-drag-over`	`.pf-v6-c-dual-list-selector__list`	Modifies the dual list selector list to indicate that a draggable item is being dragged over the list.
`.pf-m-ghost-row`	`.pf-v6-c-dual-list-selector__list-item-row`	Modifies the list item main to be a ghost row.
`.pf-m-selected`	`.pf-v6-c-dual-list-selector__list-item-row`	Modifies the menu item for the selected state.
`.pf-m-check`	`.pf-v6-c-dual-list-selector__list-item-row`	Indicates that an item is selectable with a checkbox.
`.pf-m-expandable`	`.pf-v6-c-dual-list-selector__list-item`	Indicates that an item is expandable.
`.pf-m-expanded`	`.pf-v6-c-dual-list-selector__list-item`	Indicates that an item is expanded.
`.pf-m-disabled`	`.pf-v6-c-dual-list-selector__list-item`	Indicates that an item is disabled. Note: If an item is expandable, only the top level item needs the disabled class.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.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__header--MarginBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__title-text--FontWeight	500
--pf-v6-c-dual-list-selector__title-text--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 500
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__title-text--FontSize	1rem
--pf-v6-c-dual-list-selector__title-text--FontSize --pf-t--global--font--size--body--lg --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__tools--MarginBlockEnd	1rem
--pf-v6-c-dual-list-selector__tools--MarginBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 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__tools-filter--tools-actions--MarginInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__menu--BorderWidth	1px
--pf-v6-c-dual-list-selector__menu--BorderWidth --pf-t--global--border--width--regular --pf-t--global--border--width--100 1px
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__menu--BorderColor	(In light theme) #c7c7c7
--pf-v6-c-dual-list-selector__menu--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__menu--BorderRadius	6px
--pf-v6-c-dual-list-selector__menu--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 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__menu--MarginBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__list-item-row--FontSize	0.875rem
--pf-v6-c-dual-list-selector__list-item-row--FontSize --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor	(In light theme) rgba(255, 255, 255, 0.0000)
--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor --pf-t--global--background--color--action--plain--default rgba(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__list-item-row--hover--BackgroundColor --pf-t--global--background--color--primary--hover --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.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__list-item-row--m-selected--BackgroundColor --pf-t--global--background--color--primary--clicked --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor	(In light theme) rgba(199, 199, 199, 0.2500)
--pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor --pf-t--global--background--color--action--plain--clicked --pf-t--global--background--color--600 rgba(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__item--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__item--PaddingInlineEnd	1rem
--pf-v6-c-dual-list-selector__item--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__item--PaddingBlockEnd	0.5rem
--pf-v6-c-dual-list-selector__item--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__item--PaddingInlineStart	1rem
--pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart	1rem
--pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 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__item--indent--base calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) calc(1rem + 0.5rem + --pf-t--global--font--size--200) 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__item--nested-indent--base calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) 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__draggable--item--PaddingInlineStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 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__item-text--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #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__list-item-row--m-selected__text--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #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__list-item--m-disabled__item-text--Color --pf-t--global--text--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__status--MarginBlockEnd	0.5rem
--pf-v6-c-dual-list-selector__status--MarginBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 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__status-text--FontSize --pf-t--global--font--size--sm --pf-t--global--font--size--200 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__status-text--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__controls--PaddingInlineEnd	1rem
--pf-v6-c-dual-list-selector__controls--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__controls--PaddingInlineStart	1rem
--pf-v6-c-dual-list-selector__controls--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__controls--Gap	0.25rem
--pf-v6-c-dual-list-selector__controls--Gap --pf-t--global--spacer--gap--action-to-action--plain --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__controls--MarginBlockStart	1rem
--pf-v6-c-dual-list-selector__controls--MarginBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-dual-list-selector	--pf-v6-c-dual-list-selector__item-toggle--PaddingInlineEnd	0.5rem
--pf-v6-c-dual-list-selector__item-toggle--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 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__item-check--MarginInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 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__item-count--MarginInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 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__item--c-badge--m-read--BackgroundColor --pf-t--global--color--nonstatus--gray--default --pf-t--global--color--nonstatus--gray--100 --pf-t--color--gray--20 #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__item-toggle-icon--TransitionDuration --pf-t--global--motion--duration--icon--default --pf-t--global--motion--duration--sm --pf-t--global--duration--100 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__item-toggle-icon--TransitionTimingFunction --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 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__item-toggle-icon--MinWidth --pf-v6-c-dual-list-selector__list-item-row--FontSize --pf-t--global--font--size--sm --pf-t--global--font--size--200 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__list-item--m-disabled__item-toggle-icon--Color --pf-t--global--icon--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #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__header--GridArea --pf-v6-c-dual-list-selector--m-chosen__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__tools--GridArea --pf-v6-c-dual-list-selector--m-chosen__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__status--GridArea --pf-v6-c-dual-list-selector--m-chosen__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__menu--GridArea --pf-v6-c-dual-list-selector--m-chosen__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	--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor --pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor --pf-t--global--background--color--primary--hover --pf-t--global--background--color--200 --pf-t--color--gray--10 #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__item--PaddingInlineStart --pf-v6-c-dual-list-selector__item--m-expandable--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 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__item-toggle-icon--Rotate --pf-v6-c-dual-list-selector__list-item--m-expanded__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__item-text--Color --pf-v6-c-dual-list-selector__list-item--m-disabled__item-text--Color --pf-t--global--text--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #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__item-toggle-icon--Color --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color --pf-t--global--icon--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #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--BackgroundColor --pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor --pf-t--global--background--color--primary--clicked --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.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__item-text--Color --pf-v6-c-dual-list-selector__list-item-row--m-selected__text--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #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--BackgroundColor --pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor --pf-t--global--background--color--primary--hover --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.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-ghost-row	--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor	(In light theme) rgba(199, 199, 199, 0.2500)
--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor --pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor --pf-t--global--background--color--action--plain--clicked --pf-t--global--background--color--600 rgba(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__item--PaddingInlineStart --pf-v6-c-dual-list-selector__draggable--item--PaddingInlineStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 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-badge--m-read--BackgroundColor --pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor --pf-t--global--color--nonstatus--gray--default --pf-t--global--color--nonstatus--gray--100 --pf-t--color--gray--20 #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__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 1 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 1 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 1 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 1 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 1 + calc(1rem + 0.5rem + 0.875rem)) 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__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 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__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 2 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 2 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 2 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 2 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 2 + calc(1rem + 0.5rem + 0.875rem)) 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__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 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__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 3 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 3 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 3 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 3 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 3 + calc(1rem + 0.5rem + 0.875rem)) 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__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 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__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 4 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 4 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 4 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 4 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 4 + calc(1rem + 0.5rem + 0.875rem)) 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__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 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__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 5 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 5 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 5 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 5 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 5 + calc(1rem + 0.5rem + 0.875rem)) 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__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 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__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 6 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 6 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 6 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 6 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 6 + calc(1rem + 0.5rem + 0.875rem)) 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__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 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__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 7 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 7 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 7 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 7 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 7 + calc(1rem + 0.5rem + 0.875rem)) 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__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 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__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 8 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 8 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 8 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 8 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 8 + calc(1rem + 0.5rem + 0.875rem)) 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__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 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__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 9 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 9 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 9 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 9 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 9 + calc(1rem + 0.5rem + 0.875rem)) 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__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 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__item--PaddingInlineStart calc(--pf-v6-c-dual-list-selector__item--nested-indent--base * 10 + --pf-v6-c-dual-list-selector__item--indent--base) calc(calc(--pf-v6-c-dual-list-selector__item--indent--base - --pf-t--global--spacer--md) * 10 + calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize)) calc(calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--sm + --pf-v6-c-dual-list-selector__list-item-row--FontSize) - --pf-t--global--spacer--300) * 10 + calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm)) calc(calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--200 + --pf-t--global--font--size--sm) - 1rem) * 10 + calc(1rem + 0.5rem + --pf-t--global--font--size--200)) calc(calc(calc(1rem + 0.5rem + --pf-t--global--font--size--200) - 1rem) * 10 + calc(1rem + 0.5rem + 0.875rem)) 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
--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart --pf-v6-c-dual-list-selector__item--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem

Edit this page on GitHub

Dual list selector

Examples

Basic

Available item selected

Multiple available items selected

Chosen item

Chosen item selected

Tree view

Tree view with chosen and disabled options

Tree view animated

Draggable

Documentation

Accessibility

Usage

CSS variables