FivUI
DocsAppKit

Transfer List

Move items between two lists with selection, buttons, and drag-and-drop.

Choices
0/8 selected • 8/8

Chosen

0/0 selected • 0/0
  • No items
tsx
import { TransferList, type TransferListItem } from "@/components/ui/transfer-list"


const items: TransferListItem[] = Array.from({ length: 8 }, (_, i) => ({
  id: String(i + 1),
  label:     "List item " + (i + 1),
}))


export function Demo() {
  return (
    <TransferList items={items} enableSearch showCounts listHeight={240} />
  )
}

Installation

CLI

bash
npx fivui add transfer-list

Manual

Copy and paste the following code into your project.

components/ui/transfer-list.tsx
// See local file for full source; snippet shown in docs page. Import from "@/components/ui/transfer-list".

Usage

tsx
import { TransferList } from "@/components/ui/transfer-list"
tsx
<TransferList items={[{ id: '1', label: 'Item 1' }]} />

Examples

Controlled

Source

0/2 selected • 2/2

Target

0/2 selected • 2/2
Left: [a, b] • Right: [c, d]
tsx
function DemoControlled() {
  const items = [
    { id: 'a', label: 'Alpha' },
    { id: 'b', label: 'Bravo' },
    { id: 'c', label: 'Charlie' },
    { id: 'd', label: 'Delta' },
  ]
  const [leftIds, setLeftIds] = React.useState(['a', 'b'])
  const [rightIds, setRightIds] = React.useState(['c', 'd'])
  return (
    <TransferList
      items={items}
      leftIds={leftIds}
      rightIds={rightIds}
      onChange={({ leftIds: l, rightIds: r }) => { setLeftIds(l); setRightIds(r) }}
    />
  )
}

Search and Custom Render

Team Members
Select members to invite.

Choices

0/4 selected • 4/4

Chosen

0/0 selected • 0/0
  • No items

API Reference

PropTypeDefaultDescription
itemsTransferListItem[]-All items that can be moved between lists.
leftIds/rightIdsstring[]-Controlled distribution. Provide both with onChange.
defaultLeftIds/defaultRightIdsstring[]left: all items, right: []Uncontrolled initial placement.
enableSearchbooleanfalseShow search inputs for filtering.
showControlButtonsbooleantrueShow middle move buttons.
allowDragAndDropbooleantrueAllow dragging items between lists.
renderItem(item) => ReactNodeitem.labelCustomize how items are rendered.