Transfer

Two-column transfer component for moving items between lists.

Import

import { Transfer } from 'asterui'

Examples

Basic Transfer

Move items between two columns.

</>

Source0/8

Item 1

Item 2

Item 4

Item 6

Item 7

Item 8

Item 9

Item 10

Target0/2

Item 3

Item 5

import { Transfer } from 'asterui'
import { useState } from 'react'

function App() {
  const basicData: TransferItem[] = Array.from({ length: 10 }, (_, i) => ({
    key: `item-${i + 1}`,
    title: `Item ${i + 1}`,
    description: `Description of item ${i + 1}`,
  }))
  
  const [targetKeys, setTargetKeys] = useState<string[]>(['item-3', 'item-5'])
  
  return (
      <Transfer
        dataSource={basicData}
        targetKeys={targetKeys}
        onChange={setTargetKeys}
        render={(item) => item.title}
      />
    )
}

export default App

With Search

Filter items with search input.

</>

Source0/10

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Target0/0

No data

import { Transfer } from 'asterui'
import { useState } from 'react'

function App() {
  const basicData: TransferItem[] = Array.from({ length: 10 }, (_, i) => ({
    key: `item-${i + 1}`,
    title: `Item ${i + 1}`,
    description: `Description of item ${i + 1}`,
  }))
  
  const [targetKeys, setTargetKeys] = useState<string[]>([])
  
  return (
      <Transfer
        dataSource={basicData}
        targetKeys={targetKeys}
        onChange={setTargetKeys}
        render={(item) => item.title}
        showSearch
      />
    )
}

export default App

Custom Render

Custom item rendering with title and description.

</>

Source0/5

React

A JavaScript library for building user interfaces

Vue

The Progressive JavaScript Framework

Angular

Platform for building mobile and desktop web apps

Svelte

Cybernetically enhanced web apps

Solid

Simple and performant reactivity

Target0/0

No data

import { Transfer } from 'asterui'
import { useState } from 'react'

function App() {
  const [targetKeys, setTargetKeys] = useState<string[]>([])
  
  const data: TransferItem[] = [
    { key: '1', title: 'React', description: 'A JavaScript library for building user interfaces' },
    { key: '2', title: 'Vue', description: 'The Progressive JavaScript Framework' },
    {
      key: '3',
      title: 'Angular',
      description: 'Platform for building mobile and desktop web apps',
    },
    { key: '4', title: 'Svelte', description: 'Cybernetically enhanced web apps' },
    { key: '5', title: 'Solid', description: 'Simple and performant reactivity' },
  ]
  
  return (
      <Transfer
        dataSource={data}
        targetKeys={targetKeys}
        onChange={setTargetKeys}
        render={(item) => (
          <div>
            <div className="font-medium">{item.title}</div>
            <div className="text-xs opacity-60">{item.description}</div>
          </div>
        )}
      />
    )
}

export default App

Disabled Items

Some items can be disabled.

</>

Source0/5

Available Item 1

Disabled Item

Available Item 2

Another Disabled

Available Item 3

Target0/0

No data

import { Transfer } from 'asterui'
import { useState } from 'react'

function App() {
  const [targetKeys, setTargetKeys] = useState<string[]>([])
  
  const data: TransferItem[] = [
    { key: '1', title: 'Available Item 1' },
    { key: '2', title: 'Disabled Item', disabled: true },
    { key: '3', title: 'Available Item 2' },
    { key: '4', title: 'Another Disabled', disabled: true },
    { key: '5', title: 'Available Item 3' },
  ]
  
  return (
      <Transfer
        dataSource={data}
        targetKeys={targetKeys}
        onChange={setTargetKeys}
        render={(item) => item.title}
      />
    )
}

export default App

Custom Titles

Customize column headers.

</>

Available0/10

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Selected0/0

No data

import { Transfer } from 'asterui'
import { useState } from 'react'

function App() {
  const basicData: TransferItem[] = Array.from({ length: 10 }, (_, i) => ({
    key: `item-${i + 1}`,
    title: `Item ${i + 1}`,
    description: `Description of item ${i + 1}`,
  }))
  
  const [targetKeys, setTargetKeys] = useState<string[]>([])
  
  return (
      <Transfer
        dataSource={basicData}
        targetKeys={targetKeys}
        onChange={setTargetKeys}
        render={(item) => item.title}
        titles={['Available', 'Selected']}
        showSearch
      />
    )
}

export default App

API

Transfer

Property	Description	Type	Default
dataSource	Data source array	TransferItem[]	[]
targetKeys	Keys of items in the right column	string[]	[]
onChange	Callback when items are transferred	(targetKeys: string[]) => void	-
render	Custom render function for items	(item: TransferItem) => React.ReactNode	-
showSearch	Show search input	boolean	false
titles	Titles for left and right columns	[string, string]	['Source', 'Target']
data-testid	Test ID prefix for child elements	string	-
className	Additional CSS classes	string	-

TransferItem

Property	Description	Type	Default
key	Unique identifier	string	-
title	Display title	string	-
description	Optional description	string	-
disabled	Whether item is disabled	boolean	false

Accessibility

• Uses checkbox inputs for item selection
• Keyboard navigation between items
• Transfer buttons are keyboard accessible
• Disabled items are properly announced