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 {ClayCheckbox} 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.

Open Sandbox

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

import '@clayui/css/lib/css/atlas.css';

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="/public/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

Table of Contents

API Reference