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 4 items selected
Chosen options
0 of 0 items selected

    Using more complex options with actions

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

      Props

      DualListSelector

      NameTypeRequiredDefaultDescription
      addAll(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => voidNoOptional callback for the add all button
      addAllAriaLabelstringNo'Add all'Accessible label for the add all button
      addSelected(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => voidNoOptional callback for the add selected button
      addSelectedAriaLabelstringNo'Add selected'Accessible label for the add selected button
      availableOptionsReact.ReactNode[]No[]Options to display in the available options pane.
      availableOptionsActionsReact.ReactNode[]NoActions to be displayed above the available options pane.
      availableOptionsSearchAriaLabelstringNo'Available search input'Accessible label for the search input on the available options pane.
      availableOptionsStatusstringNoStatus message to display above the available options pane.
      availableOptionsTitlestringNo'Available options'Title applied to the available options pane.
      chosenOptionsReact.ReactNode[]No[]Options to display in the chosen options pane.
      chosenOptionsActionsReact.ReactNode[]NoActions to be displayed above the chosen options pane.
      chosenOptionsSearchAriaLabelstringNo'Chosen search input'Accessible label for the search input on the chosen options pane.
      chosenOptionsStatusstringNoStatus message to display above the chosen options pane.
      chosenOptionsTitlestringNo'Chosen options'Title applied to the chosen options pane.
      classNamestringNoAdditional classes applied to the dual list selector.
      controlsAriaLabelstringNo'Selector controls'Accessible label for the controls between the two panes.
      filterOption(option: React.ReactNode, input: string) => booleanNoOptional filter function for custom filtering based on search string.
      idstringNogetUniqueId('dual-list-selector')Id of the dual list selector.
      isSearchablebooleanNoFlag indicating a search bar should be included above both the available and chosen panes.
      onListChange(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => voidNoCallback fired every time options are chosen or removed
      onOptionSelect(e: React.MouseEvent | React.ChangeEvent) => voidNoOptional callback fired when an option is selected
      removeAll(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => voidNoOptional callback for the remove all button
      removeAllAriaLabelstringNo'Remove all'Accessible label for the remove all button
      removeSelected(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => voidNoOptional callback for the remove selected button
      removeSelectedAriaLabelstringNo'Remove selected'Accessible label for the remove selected button

      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