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.