Dual List Box

Dual List Box provides users with two Select Boxes with the ability to move items between lists.

install	yarn add @clayui/form
version
use	`import {ClayDualListBox} from '@clayui/form';`

Table of Contents

API Reference

ClayDualListBox consists of low-level utilities that provides the ability to create a Select with multiple options selectable. Users are allowed to multi-select different items from a list and sometimes, options in use can be re-order. It’s a high level component using ClaySelectBox under the hood.

Note: The actual select functionality will not work here due to a pending issue at FormidableLabs/react-live#196. To see it in action, check out the storybook demo.

import {Provider} from '@clayui/core';
import {ClayDualListBox} from '@clayui/form';
import React, {useState} from 'react';

export default function App() {
  const moveBoxesOptions = [
    [
      {
        label: 'Discord',
        value: 'discord',
      },
      {
        label: 'Evernote',
        value: 'evernote',
      },
      {
        label: 'Facebook',
        value: 'facebook',
      },
      {
        label: 'LinkedIn',
        value: 'linkedin',
      },
    ],
    [
      {
        label: 'Reddit',
        value: 'reddit',
      },
      {
        label: 'Slack',
        value: 'slack',
      },
      {
        label: 'Twitter',
        value: 'twitter',
      },
    ],
  ];

  const [items, setItems] = useState(moveBoxesOptions);
  const [leftSelected, setLeftSelected] = useState([]);
  const [rightSelected, setRightSelected] = useState([]);

  const [firstSelectBoxItems, secondSelectBoxItems] = items;

  return (
    <Provider spritemap="/icons.svg">
      <div className="p-4">
        <ClayDualListBox
          disableLTR={firstSelectBoxItems.length === 0}
          disableRTL={secondSelectBoxItems.length === 0}
          items={items}
          left={{
            label: 'In Use',
            onSelectChange: setLeftSelected,
            selected: leftSelected,
          }}
          onItemsChange={setItems}
          right={{
            label: 'Available',
            onSelectChange: setRightSelected,
            selected: rightSelected,
          }}
          size={8}
        />
      </div>
    </Provider>
  );
}

API Reference

DualListBox

({ ariaLabels, className, disabled, disableLTR, disableRTL, items, left, leftMaxItems, onItemsChange, right, rightMaxItems, size, spritemap, ...otherProps }: IProps) => JSX.Element

Parameters

Properties

ariaLabels

{ error?: string; transferLTR: string; transferRTL: string; } | undefined=

{"error":"The maximum number of items for {0} is {1}","transferLTR":"Transfer Item Left to Right","transferRTL":"Transfer Item Right to Left"}

Labels for the aria attributes

disabled

boolean | undefined

Disables the component.

disableRTL

boolean | undefined

Disables the button responsible for moving items from right to left box.

disableLTR

boolean | undefined

Disables the button responsible for moving items from left to right box.

items

Array<Array<TItem>>= [[],[]]

Items spread across two arrays that will be displayed in the two Select Boxes.

onItemsChange *

(value: Array<Array<TItem>>) => void

Handler that triggers when the content of the items prop are changed. Caused by either reordering or transfering of items.

value *

Array<Array<TItem>>

left

BoxProps | undefined= {}

Props for the left Select Box.

right

BoxProps | undefined= {}

Props for the right Select Box.

size

number | undefined

Amount of items that can fit inside the both Select Boxes before a scrollbar is introduced.

spritemap

string | undefined

Path to the spritemap that Icon should use when referencing symbols.

leftMaxItems

number | undefined

Sets the maximum value of items on the left side.

rightMaxItems

number | undefined

Sets the maximum value of items on the right side.

Returns

Element

Edit this page on GitHub

Contributors

Matuzalém Teles, Krešimir Čoko, Bryce Osterhaus, Patrick Yeo

Last edited May 9, 2025 at 6:15:38 AM

Table of Contents

API Reference