Dual List Box
View in LexiconDual 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
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';
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>
);
}
Table of Contents