Skip to content
PatternFly logo

Dual list selector

A dual list selector allows users to select and move items from one list of available items to another list of selected items. Unlike a select list, a dual list selector separates the available options and the selected options into two separate lists, which allows users to easily scan the items they selected.

Examples

Basic

Available options
0 of 5 items selected
  • Item1
  • Item2
  • Item3 (disabled)
  • Item4
  • Item5
Chosen options
0 of 0 items selected

    Available item selected

    Available options
    1 of 5 items selected
    • Item1
    • Item2
    • Item3
    • Item4
    • Item5
    Chosen options
    0 of 0 items selected

      Multiple available items selected

      Available options
      1 of 5 items selected
      • Item1
      • Item2
      • Item3
      • Item4
      • Item5
      Chosen options
      0 of 0 items selected

        Chosen item

        Available options
        0 of 4 items selected
        • Item1
        • Item2
        • Item3
        • Item4
        • Item5
        Chosen options
        0 of 1 items selected
        • Item1

        Chosen item selected

        Available options
        0 of 4 items selected
        • Item1
        • Item2
        • Item3
        • Item4
        • Item5
        Chosen options
        1 of 1 items selected
        • Item5

        Tree view

        Available options
        1 of 11 items selected
        • Colors           6
          • Red
          • Orange
          • Yellow
          • Green
            • Light green
            • Medium green
            • Dark green
        • Type something
        • Type something
        • Type something
        Chosen options
        0 of 0 items selected

          Tree view with chosen and disabled options

          Available options
          0 of 10 items selected
          • Colors             6
            • Orange
            • Yellow
            • Green (disabled)
              • Light green
              • Medium green
              • Dark green
          • Type something
          • Type something
          • Type something
          Chosen options
          0 of 0 items selected
          • Colors
            • Orange

          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.
          Available options
          0 of 5 items selected
          • Item1
          • Item4
          • Item6
          Chosen options
          0 of 0 items selected
          • Item2 - draggable icon disabled
          • Item3
          • Item5 - ghost row
          • Item7 - selected
          This is the aria-live section that provides real-time feedback to the user.

          Documentation

          Accessibility

          Attribute
          Applied to
          Outcome
          aria-pressed="true or false"
          .pf-c-dual-list-selector__draggable .pf-c-button
          Indicates whether the button is currently pressed or not.
          aria-live
          [element with live text]
          To give screen reader users live feedback about what's happening during interaction with the dual list selector, both during drag and drop interactions and keyboard interactions. Highly Recommended
          aria-describedby="[id value of applicable content]"
          .pf-c-dual-list-selector__draggable .pf-c-button
          Gives the draggable button an accessible description by referring to the textual content that describes how to use the button to drag elements. Highly recommended
          aria-labelledby="[id of .pf-c-dual-list-selector__draggable .pf-c-button] [id of item text]"
          .pf-c-table__dual-list-selector .pf-c-button
          Provides an accessible name for the draggable button.
          id="[]"
          .pf-c-dual-list-selector__draggable .pf-c-button, [item text], .pf-c-dual-list-selector__status-text
          Gives the button and the text element accessible IDs.
          aria-labelledby="[id of .pf-c-dual-list-selector__status-text]
          .pf-c-dual-list-selector__list [ul]
          Gives the list an accessible name.
          role="listbox or tree or group"
          .pf-c-dual-list-selector__list [ul]
          Indicates the list is single, a tree, or a subgroup within the tree.
          aria-multiselectable="true"
          .pf-c-dual-list-selector__list [ul]
          Indicates the list is multiselectable.
          aria-activedescendant=""
          .pf-c-dual-list-selector__list [ul]
          Indicates the list has clickable children.
          role="option or treeitem"
          .pf-c-dual-list-selector__list-item [li]
          Indicates whether the item is part of a tree.
          aria-expanded="true"
          .pf-c-dual-list-selector__list-item [li]
          Indicates a treeitem is expanded.

          Usage

          Class
          Applied
          Outcome
          .pf-c-dual-list-selector
          <div>
          Initiates the dual list selector component. Required
          .pf-c-dual-list-selector__pane
          <div>
          Initiates a dual list selector pane. Required
          .pf-c-dual-list-selector__header
          <div>
          Initiates a dual list selector pane header. Required
          .pf-c-dual-list-selector__title
          <div>
          Initiates a dual list selector pane title. Required
          .pf-c-dual-list-selector__title-text
          <div>
          Initiates a dual list selector pane title text. Required
          .pf-c-dual-list-selector__tools
          <div>
          Initiates a dual list selector tools. Required
          .pf-c-dual-list-selector__filter
          <div>
          Initiates a dual list selector pane filter. Required
          .pf-c-dual-list-selector__actions
          <div>
          Initiates a dual list selector pane actions.
          .pf-c-dual-list-selector__actions-item
          <div>
          Initiates a dual list selector pane actions item.
          .pf-c-dual-list-selector__status
          <div>
          Initiates a dual list selector pane selected status. Required
          .pf-c-dual-list-selector__status-text
          <span>
          Initiates a dual list selector pane selected status text. Required
          .pf-c-dual-list-selector__menu
          <div>
          Initiates a dual list selector pane menu container. Required
          .pf-c-dual-list-selector__list
          <ul>
          Initiates a dual list selector pane menu list. Required
          .pf-c-dual-list-selector__list-item
          <li>
          Initiates a dual list selector pane menu list item. Required
          .pf-c-dual-list-selector__list-item-row
          <div>
          Initiates a dual list selector pane menu list item row. Required
          .pf-c-dual-list-selector__draggable
          <div>
          Initiates a dual list selector pane draggable element.
          .pf-c-dual-list-selector__item
          <span>, <div>
          Initiates a dual list selector pane menu item. Required
          .pf-c-dual-list-selector__item-main
          <span>
          Initiates a dual list selector pane menu item main container. Required
          .pf-c-dual-list-selector__item-check
          <span>
          Initiates the dual list selector item check.
          .pf-c-dual-list-selector__item-count
          <span>
          Initiates the dual list selector item count.
          .pf-c-dual-list-selector__item-toggle-icon
          <span>
          Initiates the dual list selector item toggle icon.
          .pf-c-dual-list-selector__item-toggle
          <button>
          Initiates the dual list selector item toggle.
          .pf-c-dual-list-selector__item-text
          <span>
          Initiates a dual list selector pane menu item text. Required
          .pf-c-dual-list-selector__controls
          <div>
          Initiates the dual list selector controls. Required
          .pf-c-dual-list-selector__controls-item
          <div>
          Initiates the dual list selector controls item. Required
          .pf-m-available
          .pf-c-dual-list-selector__pane
          Defines a pane as the available list.
          .pf-m-chosen
          .pf-c-dual-list-selector__pane
          Defines a pane as the chosen list.
          .pf-m-drag-over
          .pf-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-c-dual-list-selector__list-item-row
          Modifies the list item main to be a ghost row.
          .pf-m-selected
          .pf-c-dual-list-selector__list-item-row
          Modifies the menu item for the selected state.
          .pf-m-check
          .pf-c-dual-list-selector__list-item-row
          Indicates that an item is selectable with a checkbox.
          .pf-m-expandable
          .pf-c-dual-list-selector__list-item
          Indicates that an item is expandable.
          .pf-m-expanded
          .pf-c-dual-list-selector__list-item
          Indicates that an item is expanded.
          .pf-m-disabled
          .pf-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

          .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

          QUICKLINKS

          CONTRIBUTE

          STAY IN TOUCH

          PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

          Red Hat logo
          Copyright © 2022 Red Hat, Inc.
          Privacy statementTerms of useAll policies and guidelines