Skip to content
Patternfly Logo

Dual list selector

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. Learn more about Beta components here.

Examples

Basic

Available options
0 of 4 items selected
  • Option 1
  • Option 2
  • Option 3
  • Option 4
Chosen options
0 of 0 items selected

    Basic with tooltips

    Available options
    0 of 4 items selected
    • Option 1
    • Option 2
    • Option 3
    • Option 4
    Chosen options
    0 of 0 items selected

      Using more complex options with actions

      Available options
      0 of 4 items selected
      • Option 1
      • Option 3
      • Option 4
      • Option 2
      Chosen options
      0 of 0 items selected

        Expandable options

        Available options
        0 of 7 items selected
        • Folder 14
        • Option 5
        • Folder 2
        Chosen options
        0 of 4 items selected
        • Chosen Folder 14

        Composable dual list selector

        For more flexibility, a Dual list selector can be built using sub components. When doing so, the intended component relationships are arranged as follows:

        import React from 'react';
        import { DualListSelector, DualListSelectorPane, DualListSelectorList, DualListSelectorListItem, DualListSelectorControlsWrapper, DualListSelectorControl } from '@patternfly/react-core';
        
        <DualListSelector>
        
          <DualListSelectorPane>
            <DualListSelectorList>
              <DualListSelectorListItem/>
            </DualListSelectorList>
          </DualListSelectorPane>
          
          <DualListSelectorControlsWrapper>
            <DualListSelectorControl/> {/* The standard Dual list selector has 4 controls */}
          </DualListSelectorControlsWrapper>
          
          <DualListSelectorPane isChosen>
            <DualListSelectorList>
              <DualListSelectorListItem/>
            </DualListSelectorList>
          </DualListSelectorPane>
          
        </DualListSelector>

        Note: Keyboard accessibility and screen reader accessibility for the DragDrop component are still in development.

        Available
        0 of 7 options selected
        • Apple
        • Banana
        • Pineapple
        • Orange
        • Grape
        • Peach
        • Strawberry
        Chosen
        0 of 0 options selected

          Reordering lists using drag and drop

          To make a pane able to be reordered:

          • wrap the DualListSelectorPane in a DragDrop component
          • wrap the DualListSelectorList in a Droppable component
          • wrap the DualListSelectorListItem components in a Draggable component
          • define an onDrop callback which reorders the sortable options.
            • The onDrop function provides the starting location and destination location for a dragged item. It should return true to enable the 'drop' animation in the new location and false to enable the 'drop' animation back to the item's old position.
            • define an onDrag callback which ensures that the drag event will not cross hairs with the onOptionSelect click event set on the option. Note: the ignoreNextOptionSelect state value is used to prevent selection while dragging.
          Available
          0 of 3 options selected
          • Apple
          • Banana
          • Pineapple
          Chosen
          0 of 4 options selected
          • Orange
          • Grape
          • Peach
          • Strawberry

          Props

          DualListSelector

          *required
          NameTypeDefaultDescription
          addAll(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => voidOptional callback for the dynamically built add all button
          addAllAriaLabelstring'Add all'Accessible label for the dynamically built add all button
          addAllTooltipReact.ReactNodeTooltip content for the dynamically built add all button
          addAllTooltipPropsanyAdditonal tooltip properties for the dynamically built add all tooltip
          addSelected(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => voidOptional callback for the dynamically built add selected button
          addSelectedAriaLabelstring'Add selected'Accessible label for the dynamically built add selected button
          addSelectedTooltipReact.ReactNodeTooltip content for the dynamically built add selected button
          addSelectedTooltipPropsanyAdditonal tooltip properties for the dynamically built add selected tooltip
          availableOptionsReact.ReactNode[] | DualListSelectorTreeItemData[][]Options to display in the dynamically built available options pane. When using trees, the options should be in the DualListSelectorTreeItemData[] format.
          availableOptionsActionsReact.ReactNode[]Actions to be displayed above the dynamically built available options pane.
          availableOptionsSearchAriaLabelstring'Available search input'Accessible label for the search input on the dynamically built available options pane.
          availableOptionsStatusstringStatus message to display above the dynamically built available options pane.
          availableOptionsTitlestring'Available options'Title applied to the dynamically built available options pane.
          childrenReact.ReactNode''Content to be rendered in the dual list selector. Panes & controls will not be built dynamically when children are provided.
          chosenOptionsReact.ReactNode[] | DualListSelectorTreeItemData[][]Options to display in the dynamically built chosen options pane. When using trees, the options should be in the DualListSelectorTreeItemData[] format.
          chosenOptionsActionsReact.ReactNode[]Actions to be displayed above the dynamically built chosen options pane.
          chosenOptionsSearchAriaLabelstring'Chosen search input'Accessible label for the search input on the dynamically built chosen options pane.
          chosenOptionsStatusstringStatus message to display above the dynamically built chosen options pane.
          chosenOptionsTitlestring'Chosen options'Title applied to the dynamically built chosen options pane.
          classNamestringAdditional classes applied to the dual list selector.
          controlsAriaLabelstring'Selector controls'Accessible label for the dynamically built controls between the two panes.
          filterOption(option: React.ReactNode, input: string) => booleanOptional filter function for custom filtering based on search string. Used with a dynamically built search input.
          idstringgetUniqueId('dual-list-selector')Id of the dual list selector.
          isDisabledbooleanfalseFlag indicating if the dual list selector is in a disabled state
          isSearchablebooleanFlag indicating a search bar should be included above both the dynamically built available and chosen panes.
          isTreebooleanfalseFlag indicating if the dual list selector uses trees instead of simple lists
          onAvailableOptionsSearchInputChanged(value: string, event: React.FormEvent<HTMLInputElement>) => voidA callback for when the search input value for the dynamically built available options changes.
          onChosenOptionsSearchInputChanged(value: string, event: React.FormEvent<HTMLInputElement>) => voidA callback for when the search input value for the dynamically built chosen options changes.
          onListChange(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => voidCallback fired every time dynamically built options are chosen or removed
          onOptionCheck( e: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent, checked: boolean, checkedId: string, newCheckedItems: string[] ) => voidOptional callback fired when a dynamically built option is checked
          onOptionSelect( e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, index: number, isChosen: boolean, id: string, itemData: any, parentData: any ) => voidOptional callback fired when a dynamically built option is selected
          removeAll(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => voidOptional callback for the dynamically built remove all button
          removeAllAriaLabelstring'Remove all'Accessible label for the dynamically built remove all button
          removeAllTooltipReact.ReactNodeTooltip content for the dynamically built remove all button
          removeAllTooltipPropsanyAdditonal tooltip properties for the dynamically built remove all tooltip
          removeSelected(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => voidOptional callback for the dynamically built remove selected button
          removeSelectedAriaLabelstring'Remove selected'Accessible label for the dynamically built remove selected button
          removeSelectedTooltipReact.ReactNodeTooltip content for the dynamically built remove selected button
          removeSelectedTooltipPropsanyAdditonal tooltip properties for the dynamically built remove selected tooltip

          DualListSelectorPane

          *required
          NameTypeDefaultDescription
          actionsReact.ReactNode[]Actions to place above the pane.
          childrenReact.ReactNodeA dual list selector list or dual list selector tree to be rendered in the pane.
          classNamestring''Additional classes applied to the dual list selector pane.
          idstringgetUniqueId('dual-list-selector-pane')Id of the pane.
          isChosenbooleanfalseFlag indicating if this pane is the chosen pane.
          isDisabledbooleanfalseFlag indicating whether the component is disabled.
          onSearch(event: React.ChangeEvent<HTMLInputElement>) => voidCallback for search input. To be used when isSearchable is true.
          searchInputReact.ReactNodeA search input placed above the list at the top of the pane, before actions.
          statusstring''Status to display above the pane.
          titleReact.ReactNode''Title of the pane.

          DualListSelectorControl

          *required
          NameTypeDefaultDescription
          aria-labelstringAccessible label for the dual list selector control.
          childrenReact.ReactNodeContent to be rendered in the dual list selector control.
          classNamestringAdditional classes applied to the dual list selector control.
          isDisabledbooleanFlag indicating the control is disabled.
          onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => voidCallback fired when dual list selector control is selected.
          tooltipContentReact.ReactNodeContent to be displayed in a tooltip on hover of control.
          tooltipPropsanyAdditional tooltip properties passed to the tooltip.

          DualListSelectorControlsWrapper

          *required
          NameTypeDefaultDescription
          aria-labelstringAccessible label for the dual list selector controls wrapper.
          childrenReact.ReactNodeAnything that can be rendered inside of the wrapper.
          classNamestringAdditional classes added to the wrapper.

          DualListSelectorTree

          *required
          NameTypeDefaultDescription
          datarequiredDualListSelectorTreeItemData[]Data of the tree view
          defaultAllExpandedbooleanfalseSets the default expanded behavior
          hasBadgesbooleanfalseFlag indicating if all options should have badges
          idstringID of the tree view
          isDisabledbooleanfalseCallback fired when an option is checked
          onOptionCheck( event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent, isChecked: boolean, itemData: DualListSelectorTreeItemData ) => void

          DualListSelectorListItem

          *required
          NameTypeDefaultDescription
          childrenReact.ReactNodeContent rendered inside the dual list selector.
          classNamestringAdditional classes applied to the dual list selector.
          draggableButtonAriaLabelstringAccessible label for the draggable button on draggable list items
          idstringID of the option.
          isDisabledbooleanFlag indicating if the dual list selector is in a disabled state
          isDraggablebooleanFlag indicating this item is draggable for reordring
          isSelectedbooleanFlag indicating the list item is currently selected.
          onOptionSelect(e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, id?: string) => voidCallback fired when an option is selected.

          DualListSelectorTreeItemData

          *required
          NameTypeDefaultDescription
          idrequiredstringID of the option
          isCheckedrequiredbooleanChecked state of the option
          textrequiredstringText of the option
          badgePropsanyAdditional properties to pass to the option badge
          checkPropsanyAdditional properties to pass to the option checkbox
          childrenDualListSelectorTreeItemData[]Content rendered inside the dual list selector.
          classNamestringAdditional classes applied to the dual list selector.
          defaultExpandedbooleanFlag indicating this option is expanded by default.
          hasBadgebooleanFlag indicating this option has a badge
          isDisabledbooleanFlag indicating whether the component is disabled.
          onOptionCheck( event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent, isChecked: boolean, isChosen: boolean, itemData: DualListSelectorTreeItemData ) => voidCallback fired when an option is checked
          parentIdstringParent id of an option

          CSS variables

          .pf-c-dual-list-selector--pf-c-dual-list-selector__header--GridArea
          pane-header
          .pf-c-dual-list-selector--pf-c-dual-list-selector__tools--GridArea
          pane-tools
          .pf-c-dual-list-selector--pf-c-dual-list-selector__status--GridArea
          pane-status
          .pf-c-dual-list-selector--pf-c-dual-list-selector__menu--GridArea
          pane-menu
          .pf-c-dual-list-selector--pf-c-dual-list-selector__controls--GridArea
          controls
          .pf-c-dual-list-selector--pf-c-dual-list-selector--m-chosen__header--GridArea
          pane-header-c
          .pf-c-dual-list-selector--pf-c-dual-list-selector--m-chosen__tools--GridArea
          pane-tools-c
          .pf-c-dual-list-selector--pf-c-dual-list-selector--m-chosen__status--GridArea
          pane-status-c
          .pf-c-dual-list-selector--pf-c-dual-list-selector--m-chosen__menu--GridArea
          pane-menu-c
          .pf-c-dual-list-selector--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min
          12.5rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max
          28.125rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__header--MarginBottom
          0.5rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__title-text--FontWeight
          700
          .pf-c-dual-list-selector--pf-c-dual-list-selector__tools--MarginBottom
          1rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__tools-filter--tools-actions--MarginLeft
          0.5rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__menu--BorderWidth
          1px
          .pf-c-dual-list-selector--pf-c-dual-list-selector__menu--BorderColor
          #d2d2d2
          .pf-c-dual-list-selector--pf-c-dual-list-selector__menu--MinHeight
          12.5rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__menu--MaxHeight
          20rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__list-item-row--FontSize
          0.875rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__list-item-row--BackgroundColor
          transparent
          .pf-c-dual-list-selector--pf-c-dual-list-selector__list-item-row--hover--BackgroundColor
          #f0f0f0
          .pf-c-dual-list-selector--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor
          #f0f0f0
          .pf-c-dual-list-selector--pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor
          #f0f0f0
          .pf-c-dual-list-selector--pf-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor
          #fff
          .pf-c-dual-list-selector--pf-c-dual-list-selector__list-item--m-ghost-row--Opacity
          .4
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item--PaddingTop
          0.5rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item--PaddingRight
          1rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item--PaddingBottom
          0.5rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item--PaddingLeft
          1rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item--m-expandable--PaddingLeft
          0
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item--indent--base
          calc(1rem + 0.5rem + 0.875rem)
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item--nested-indent--base
          calc(calc(1rem + 0.5rem + 0.875rem) - 1rem)
          .pf-c-dual-list-selector--pf-c-dual-list-selector__draggable--item--PaddingLeft
          0.25rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item-text--Color
          #151515
          .pf-c-dual-list-selector--pf-c-dual-list-selector__list-item-row--m-selected__text--Color
          #06c
          .pf-c-dual-list-selector--pf-c-dual-list-selector__list-item-row--m-selected__text--FontWeight
          700
          .pf-c-dual-list-selector--pf-c-dual-list-selector__list-item--m-disabled__item-text--Color
          #6a6e73
          .pf-c-dual-list-selector--pf-c-dual-list-selector__status--MarginBottom
          0.5rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__status-text--FontSize
          0.875rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__status-text--Color
          #6a6e73
          .pf-c-dual-list-selector--pf-c-dual-list-selector__controls--PaddingRight
          1rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__controls--PaddingLeft
          1rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item-toggle--PaddingTop
          0.5rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item-toggle--PaddingRight
          0.5rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item-toggle--PaddingBottom
          0.5rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item-toggle--PaddingLeft
          1rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item-toggle--MarginTop
          calc(0.5rem * -1)
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item-toggle--MarginBottom
          calc(0.5rem * -1)
          .pf-c-dual-list-selector--pf-c-dual-list-selector__list__list__item-toggle--Left
          0
          .pf-c-dual-list-selector--pf-c-dual-list-selector__list__list__item-toggle--TranslateX
          -100%
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item-check--MarginRight
          0.5rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item-count--Marginleft
          0.5rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item--c-badge--m-read--BackgroundColor
          #d2d2d2
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item-toggle-icon--Rotate
          0
          .pf-c-dual-list-selector--pf-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate
          90deg
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item-toggle-icon--Transition
          all 250ms cubic-bezier(.42, 0, .58, 1)
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item-toggle-icon--MinWidth
          0.875rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color
          #d2d2d2
          .pf-c-dual-list-selector__pane.pf-m-chosen--pf-c-dual-list-selector__header--GridArea
          pane-header-c
          .pf-c-dual-list-selector__pane.pf-m-chosen--pf-c-dual-list-selector__tools--GridArea
          pane-tools-c
          .pf-c-dual-list-selector__pane.pf-m-chosen--pf-c-dual-list-selector__status--GridArea
          pane-status-c
          .pf-c-dual-list-selector__pane.pf-m-chosen--pf-c-dual-list-selector__menu--GridArea
          pane-menu-c
          .pf-c-dual-list-selector__list--pf-c-dual-list-selector__item-toggle-icon--Rotate
          0
          .pf-c-dual-list-selector__list .pf-c-dual-list-selector__list--pf-c-dual-list-selector__item-toggle--MarginTop
          0
          .pf-c-dual-list-selector__list .pf-c-dual-list-selector__list--pf-c-dual-list-selector__item-toggle--MarginBottom
          0
          .pf-c-dual-list-selector__list-item:focus--pf-c-dual-list-selector__list-item-row--BackgroundColor
          #f0f0f0
          .pf-c-dual-list-selector__list-item.pf-m-expandable--pf-c-dual-list-selector__item--PaddingLeft
          0
          .pf-c-dual-list-selector__list-item.pf-m-expanded--pf-c-dual-list-selector__item-toggle-icon--Rotate
          90deg
          .pf-c-dual-list-selector__list-item.pf-m-disabled--pf-c-dual-list-selector__item-text--Color
          #6a6e73
          .pf-c-dual-list-selector__list-item.pf-m-disabled--pf-c-dual-list-selector__item-toggle-icon--Color
          #d2d2d2
          .pf-c-dual-list-selector__list-item-row:hover--pf-c-dual-list-selector__list-item-row--BackgroundColor
          #f0f0f0
          .pf-c-dual-list-selector__list-item-row.pf-m-selected--pf-c-dual-list-selector__list-item-row--BackgroundColor
          #f0f0f0
          .pf-c-dual-list-selector__list-item-row.pf-m-selected .pf-c-dual-list-selector__item-text--pf-c-dual-list-selector__item-text--Color
          #06c
          .pf-c-dual-list-selector__list-item-row.pf-m-check--pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor
          transparent
          .pf-c-dual-list-selector__list-item-row.pf-m-ghost-row--pf-c-dual-list-selector__list-item-row--BackgroundColor
          #fff
          .pf-c-dual-list-selector__draggable + .pf-c-dual-list-selector__item--pf-c-dual-list-selector__item--PaddingLeft
          0.25rem
          .pf-c-dual-list-selector__draggable .pf-c-button--pf-c-button--FontSize
          inherit
          .pf-c-dual-list-selector__item-count .pf-c-badge.pf-m-read--pf-c-badge--m-read--BackgroundColor
          #d2d2d2
          .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item--pf-c-dual-list-selector__item--PaddingLeft
          calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 1 + calc(1rem + 0.5rem + 0.875rem))
          .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item--pf-c-dual-list-selector__list__list__item-toggle--Left
          calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 1 + calc(1rem + 0.5rem + 0.875rem))
          .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item--pf-c-dual-list-selector__item--PaddingLeft
          calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 2 + calc(1rem + 0.5rem + 0.875rem))
          .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item--pf-c-dual-list-selector__list__list__item-toggle--Left
          calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 2 + calc(1rem + 0.5rem + 0.875rem))
          .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item--pf-c-dual-list-selector__item--PaddingLeft
          calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 3 + calc(1rem + 0.5rem + 0.875rem))
          .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item--pf-c-dual-list-selector__list__list__item-toggle--Left
          calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 3 + calc(1rem + 0.5rem + 0.875rem))
          .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item--pf-c-dual-list-selector__item--PaddingLeft
          calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 4 + calc(1rem + 0.5rem + 0.875rem))
          .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item--pf-c-dual-list-selector__list__list__item-toggle--Left
          calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 4 + calc(1rem + 0.5rem + 0.875rem))
          .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item--pf-c-dual-list-selector__item--PaddingLeft
          calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 5 + calc(1rem + 0.5rem + 0.875rem))
          .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item--pf-c-dual-list-selector__list__list__item-toggle--Left
          calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 5 + calc(1rem + 0.5rem + 0.875rem))
          .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item--pf-c-dual-list-selector__item--PaddingLeft
          calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 6 + calc(1rem + 0.5rem + 0.875rem))
          .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item--pf-c-dual-list-selector__list__list__item-toggle--Left
          calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 6 + calc(1rem + 0.5rem + 0.875rem))
          .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item--pf-c-dual-list-selector__item--PaddingLeft
          calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 7 + calc(1rem + 0.5rem + 0.875rem))
          .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item--pf-c-dual-list-selector__list__list__item-toggle--Left
          calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 7 + calc(1rem + 0.5rem + 0.875rem))
          .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item--pf-c-dual-list-selector__item--PaddingLeft
          calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 8 + calc(1rem + 0.5rem + 0.875rem))
          .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item--pf-c-dual-list-selector__list__list__item-toggle--Left
          calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 8 + calc(1rem + 0.5rem + 0.875rem))
          .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item--pf-c-dual-list-selector__item--PaddingLeft
          calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 9 + calc(1rem + 0.5rem + 0.875rem))
          .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item--pf-c-dual-list-selector__list__list__item-toggle--Left
          calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 9 + calc(1rem + 0.5rem + 0.875rem))
          .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item--pf-c-dual-list-selector__item--PaddingLeft
          calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 10 + calc(1rem + 0.5rem + 0.875rem))
          .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item .pf-c-dual-list-selector__list-item--pf-c-dual-list-selector__list__list__item-toggle--Left
          calc(calc(calc(1rem + 0.5rem + 0.875rem) - 1rem) * 10 + calc(1rem + 0.5rem + 0.875rem))

          View source on GitHub