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
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
Chosen options
0 of 0 items selected
Props
DualListSelector
Name | Type | Required | Default | Description |
---|---|---|---|---|
addAll | (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void | No | Optional callback for the add all button | |
addAllAriaLabel | string | No | 'Add all' | Accessible label for the add all button |
addSelected | (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void | No | Optional callback for the add selected button | |
addSelectedAriaLabel | string | No | 'Add selected' | Accessible label for the add selected button |
availableOptions | React.ReactNode[] | DualListSelectorTreeItemData[] | No | [] | Options to display in the available options pane. When using trees, the options should be in the DualListSelectorTreeItemData[] format. |
availableOptionsActions | React.ReactNode[] | No | Actions to be displayed above the available options pane. | |
availableOptionsSearchAriaLabel | string | No | 'Available search input' | Accessible label for the search input on the available options pane. |
availableOptionsStatus | string | No | Status message to display above the available options pane. | |
availableOptionsTitle | string | No | 'Available options' | Title applied to the available options pane. |
chosenOptions | React.ReactNode[] | DualListSelectorTreeItemData[] | No | [] | Options to display in the chosen options pane. When using trees, the options should be in the DualListSelectorTreeItemData[] format. |
chosenOptionsActions | React.ReactNode[] | No | Actions to be displayed above the chosen options pane. | |
chosenOptionsSearchAriaLabel | string | No | 'Chosen search input' | Accessible label for the search input on the chosen options pane. |
chosenOptionsStatus | string | No | Status message to display above the chosen options pane. | |
chosenOptionsTitle | string | No | 'Chosen options' | Title applied to the chosen options pane. |
className | string | No | Additional classes applied to the dual list selector. | |
controlsAriaLabel | string | No | 'Selector controls' | Accessible label for the controls between the two panes. |
filterOption | (option: React.ReactNode, input: string) => boolean | No | Optional filter function for custom filtering based on search string. | |
id | string | No | getUniqueId('dual-list-selector') | Id of the dual list selector. |
isSearchable | boolean | No | Flag indicating a search bar should be included above both the available and chosen panes. | |
isTree | boolean | No | ||
onAvailableOptionsSearchInputChanged | (value: string, event: React.FormEvent<HTMLInputElement>) => void | No | A callback for when the search input value for available options changes. | |
onChosenOptionsSearchInputChanged | (value: string, event: React.FormEvent<HTMLInputElement>) => void | No | A callback for when the search input value for chosen options changes. | |
onListChange | (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void | No | Callback fired every time options are chosen or removed | |
onOptionCheck | ( e: React.MouseEvent | React.ChangeEvent<HTMLInputElement>, checked: boolean, checkedId: string, newCheckedItems: string[] ) => void | No | Optional callback fired when an option is checked | |
onOptionSelect | (e: React.MouseEvent | React.ChangeEvent) => void | No | Optional callback fired when an option is selected | |
removeAll | (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void | No | Optional callback for the remove all button | |
removeAllAriaLabel | string | No | 'Remove all' | Accessible label for the remove all button |
removeSelected | (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => void | No | Optional callback for the remove selected button | |
removeSelectedAriaLabel | string | No | '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