Data Display

Transfer

Dual-list picker to move items between a source and target list, with search, select-all, and disabled item support.

Installation

npx benflux-ui add transfer

Usage

import { Transfer, type TransferItem } from "@benflux-ui/react"

const items: TransferItem[] = [
  { key: "1", title: "Item 1", description: "First item" },
  { key: "2", title: "Item 2", disabled: true },
]

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

<Transfer
  dataSource={items}
  targetKeys={targetKeys}
  onChange={setTargetKeys}
  titles={["Source", "Target"]}
  showSearch
  render={(item) => item.title}
/>

Props

Prop	Type	Default	Description
dataSource*	TransferItem[]	—	Full list of items (source + target)
targetKeys*	string[]	—	Keys of items in the right (target) panel
onChange*	(targetKeys: string[]) => void	—	Called when items are moved between panels
titles	[string, string]	["", ""]	Labels for the source and target panels
showSearch	boolean	false	Show search box in each panel
render	(item: TransferItem) => ReactNode	—	Custom render function for each item
disabled	boolean	false	Disable the entire transfer component