React Dual Listbox is a lightweight React component for rendering dual listbox views. Checkout the examples below and then view source code or main documentation page when you are ready to try it out.
Below is your most basic example. It supports moving by double-clicking, pressing enter, or clicking the buttons in the middle of the panel.
React Dual Listbox also supports the use of
To enable filtering, just pass in the
canFilter property. You can optionally pass in
onFilterChange to control the state yourself:
Align Actions to Top Example
In addition to having the movement action aligned to the middle of the component, you can arrange them to the
top using the
Simply pass in the
disabled property to disable this control:
Note – Individual items in may be disabled by setting
Preserve Select Order Example
The default ordering behavior behavior is to arrange selections to line up with the ordering of the available
preserveSelectOrder is passed to the component, as shown in the example below, the
order in which a user moves the items to the right matters.
Optionally, the property
showOrderButtons may also be passed to the component to allow the
re-arrangement already selected options.
Allow Duplicates Example
To allow the selection of the same option multiple times, pass in the
allowDuplicate property. This
pairs well with the
Restrict Available Example
In the following example, we are restricting which options are available for selection. This may be useful if you wish to categorize a large list of items.