React Dual Listbox is a lightweight React component for rendering dual listbox views.

Checkout the examples and their associated source code below. Head over to the main documentation page to see the full list of options.

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:

Lazy Filter Example

The component can support lazy filtering/searching, using the onFilterCallback property. Try searching for “europa” or “io”.

See LazyFilterExample.jsx for the sample code that includes a mock API request.

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 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.

Required Example

Pass the required property to make this component required.

RTL Support Example

To support right-to-left languages, pass htmlDir="rtl" to the component.

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.