Skip to content
Patternfly Logo

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

Examples

Basic

Available options
0 of 5 items selected
Chosen options
0 of 0 items selected

    Available item selected

    Available options
    1 of 5 items selected
    Chosen options
    0 of 0 items selected

      Multiple available items selected

      Available options
      1 of 5 items selected
      Chosen options
      0 of 0 items selected

        Chosen item

        Available options
        0 of 4 items selected
        Chosen options
        0 of 1 items selected

        Chosen item selected

        Available options
        0 of 4 items selected
        Chosen options
        1 of 1 items selected

        Tree view

        Available options
        1 of 11 items selected
        • Colors
          00
          • Green
        Chosen options
        0 of 0 items selected

          Tree view chosen options

          Available options
          0 of 10 items selected
          • Colors
            • Green
          Chosen options
          0 of 0 items selected
          • Colors

          Documentation

          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__item
          <button>, <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-selected
          .pf-c-dual-list-selector__list-item
          Modifies the menu list item for the selected state.

          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__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--FontSize
          0.875rem
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item--BackgroundColor
          transparent
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item--hover--BackgroundColor
          #f0f0f0
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item--focus-within--BackgroundColor
          #f0f0f0
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item--m-selected--BackgroundColor
          #f0f0f0
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item--list__item--PaddingLeft
          calc(1.5rem + 2rem)
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item--list__item--m-expandable--PaddingLeft
          calc(1.5rem + 1rem)
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item--list--list__item--PaddingLeft
          calc(3rem + 2rem)
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item-text--Color
          #151515
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item--m-selected__text--Color
          #06c
          .pf-c-dual-list-selector--pf-c-dual-list-selector__item--m-selected__text--FontWeight
          700
          .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--PaddingRight
          0.5rem
          .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--Transform
          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__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__list--pf-c-dual-list-selector__item--PaddingLeft
          calc(1.5rem + 2rem)
          .pf-c-dual-list-selector__list .pf-c-dual-list-selector__list .pf-c-dual-list-selector__list-item.pf-m-expandable--pf-c-dual-list-selector__item--PaddingLeft
          calc(1.5rem + 1rem)
          .pf-c-dual-list-selector__list .pf-c-dual-list-selector__list .pf-c-dual-list-selector__list--pf-c-dual-list-selector__item--PaddingLeft
          calc(3rem + 2rem)
          .pf-c-dual-list-selector__list-item.pf-m-expanded > .pf-c-dual-list-selector__item--pf-c-dual-list-selector__item-toggle-icon--Transform
          rotate(--pf-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--rotate)
          .pf-c-dual-list-selector__item:hover--pf-c-dual-list-selector__item--BackgroundColor
          #f0f0f0
          .pf-c-dual-list-selector__item:focus-within--pf-c-dual-list-selector__item--BackgroundColor
          #f0f0f0
          .pf-c-dual-list-selector__item.pf-m-selected--pf-c-dual-list-selector__item--BackgroundColor
          #f0f0f0
          .pf-c-dual-list-selector__item.pf-m-selected .pf-c-dual-list-selector__item-text--pf-c-dual-list-selector__item-text--Color
          #06c
          .pf-c-dual-list-selector__item .pf-c-dual-list-selector__item-count .pf-c-badge.pf-m-read--pf-c-badge--m-read--BackgroundColor
          #d2d2d2

          View source on GitHub