Skip to content
Patternfly Logo

Dual list selector

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

      Expandable options with checkboxes

      Available options
      0 of 7 items selected
      • Folder 14
      • Option 5
      • Folder 2
      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[] | DualListSelectorTreeItemData[]No[]Options to display in the available options pane. When using trees, the options should be in the DualListSelectorTreeItemData[] format.
        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[] | DualListSelectorTreeItemData[]No[]Options to display in the chosen options pane. When using trees, the options should be in the DualListSelectorTreeItemData[] format.
        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.
        isTreebooleanNo
        onListChange(newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => voidNoCallback fired every time options are chosen or removed
        onOptionCheck( e: React.MouseEvent | React.ChangeEvent<HTMLInputElement>, checked: boolean, checkedId: string, newCheckedItems: string[] ) => voidNoOptional callback fired when an option is checked
        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--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__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--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__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-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.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--pf-c-dual-list-selector__item-toggle-icon--Rotate
        90deg
        .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-m-check--pf-c-dual-list-selector__item--m-selected--BackgroundColor
        transparent
        .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
        .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