Transfer Component

Dual-list selector for moving items between lists with search, select all, and bidirectional transfer support.

Basic Transfer

Simple dual-list transfer with search functionality

Available Items
8 items
Selected Items
0 items
No items

Selected: None

With Initial Selection

Transfer component with pre-selected items

Source
6 items
Target
2 items

Without Search

Disable search functionality for simple transfers

All Team Members
6 items
Project Team
0 items
No items

One-way Transfer

Only allow moving items from source to target (no removal)

Available Skills
5 items
Required Skills
0 items
No items

Custom List Height

Adjust list height for different content amounts

Source
8 items
Target
0 items
No items

API Reference

Props and types for the Transfer component

TransferProps

dataSourceTransferItem[]All available items
targetKeysstring[]Keys of selected items
onChangefunctionCallback when selection changes
titles[string, string]List titles (default: ['Source', 'Target'])
searchablebooleanEnable search (default: true)
oneWaybooleanOne-way transfer only (default: false)
listHeightnumberList height in pixels (default: 300)
showSelectAllbooleanShow select all checkbox (default: true)

TransferItem

keystringUnique identifier
titlestringItem display text
descriptionstringOptional description
disabledbooleanDisable item selection

Usage Example

import { Transfer, TransferItem } from '@/components/ui/transfer'

const data: TransferItem[] = [
  { key: '1', title: 'Item 1', description: 'Description' },
  { key: '2', title: 'Item 2' },
]

const [targetKeys, setTargetKeys] = useState<string[]>([])

<Transfer
  dataSource={data}
  targetKeys={targetKeys}
  onChange={setTargetKeys}
  titles={['Available', 'Selected']}
  searchable={true}
/>