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.
Examples
Basic Examples
Below is your most basic example. It supports moving by double-clicking, pressing enter, or clicking the buttons in the middle of the panel.
Optgroup Example
React Dual Listbox also supports the use of optgroup
:
Advanced Options
Filter Example
To enable filtering, just pass in the canFilter
property. You can optionally pass in
filter
and 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 alignActions
property:
Disabled Example
Simply pass in the disabled
property to disable this control:
Note – Individual items in may be disabled by setting disabled: true
.
Preserve Select Order Example
The default ordering behavior behavior is to arrange selections to line up with the ordering of the available
options. When 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 preserveSelectOrder
property.
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.