Transfer List

Tag: &lt;flint-transfer-list&gt;
Class: FlintTransferList

A premium Transfer List component for moving items between two lists.

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintTransferList } from '@getufy/flint-ui';

html

<flint-transfer-list></flint-transfer-list>

Property	Attribute	Type	Default	Description
`options`	`options`	`TransferOption[]`	`[]`	Available options to display in the transfer list.
`value`	`value`	`string[]`	`[]`	Currently selected values (items in the right list).
`defaultValue`	`default-value`	`string[]`	`[]`	Initial value for uncontrolled usage. Applied once on first render.
`leftTitle`	`leftTitle`	`string`	`'Options'`	Title displayed above the left (available) list.
`rightTitle`	`rightTitle`	`string`	`'Selected'`	Title displayed above the right (selected) list.
`disabled`	`disabled`	`boolean`	`false`	Whether the transfer list is disabled.
`searchable`	`searchable`	`boolean`	`false`	Whether to show search inputs for filtering each list.

Event	Detail	Description
`flint-transfer-list-change`	`{ value: string[] }`	Dispatched when items are moved between lists. detail: `{ value: string[] }`

Name	Description
`actions`	The actions container.
`base`	The component's base wrapper element.
`header`	The header element.
`left-list`	The left list element.
`right-list`	The right list element.

Transfer List ​