Transfer

A two-column multi-select component that moves elements from one column to another in real time.

Install

npm install @arco-design/web-react@2.66.18

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

Basic: A two-column multi-select component that moves elements from one column to another in real time.
With Search Box: Specify showSearch to use the Transfer with search box.
One Way: Specify oneWay to only allow one-way movement
Advanced: Advanced usage of shuttle frame, configurable operation copy, and customizable width and height.
Pagination: When the amount of data is large, specify pagination to display the data in pages.
Custom Render: Custom rendering of each item through render.
With Table: Use Table component as a custom rendering list.
With Tree: Use Tree component as a custom rendering list.
Simple Mode: Specify simple to turn on simple mode, click the option to move. Additional configuration simple = { retainSelectedItems: true } to keep selected items on the left.
Drag: Specify draggable as true, and the left and right panels can be sorted by dragging.
Custom-Header: Pass render functions to titleTexts to completely customize the title bar of the Transfer. The parameter received by the function is { countTotal: number; countSelected: number; checkbox: ReactNode; clear: () => void }.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

Transfer

Property	Description	Type	DefaultValue	Version
disabled	Whether is disabled	boolean	`-`	-
draggable	Whether the items in the list can be dragged	boolean	`-`	-
oneWay	Whether to allow only one-way movement	boolean	`-`	-
onChange	Callback when the transfer between columns is complete	(newTargetKeys: string[], direction: 'source' \| 'target', moveKeys: string[]) => void	`-`	-
onSearch	Callback when value of search box is changed	(value: string, type?: 'source' \| 'target') => void	`-`	-
className	Additional css class	string \| string[]	`-`	-
dataSource	Used for setting the source data	TransferItem[]	`-`	-
defaultSelectedKeys	Initial set of keys of selected items	string[]	`[]`	-
defaultTargetKeys	Initial set of keys of items that are listed on the target column	string[]	`[]`	-
listStyle	The additional css style of columns, pass in different properties for lists through array	CSSProperties \| CSSProperties[]	`-`	Array format in '2.40.0'
onDragEnd	Callback when the user has finished dragging a transfer item	(e: DragEvent<HTMLSpanElement>, item: TransferItem) => void	`-`	-
onDragLeave	Callback when a draggable item leaves a valid drop target	(e: DragEvent<HTMLSpanElement>, item: TransferItem) => void	`-`	-
onDragOver	Callback when a draggable item is being dragged over a valid drop target	(e: DragEvent<HTMLSpanElement>, item: TransferItem) => void	`-`	-
onDragStart	Callback when user start to drag a transfer item	(e: DragEvent<HTMLSpanElement>, item: TransferItem) => void	`-`	-
onDrop	Callback when draggable item is dropped in a `<div>` element	(info: {e: DragEvent<HTMLSpanElement>;dragItem: TransferItem;dropItem: TransferItem;dropPosition: number;}) => void	`-`	-
operationStyle	The additional css style of operation buttons	CSSProperties	`-`	-
operationTexts	Texts of buttons that are used to transfer item	string[] \| ReactNode[]	`-`	-
pagination	Whether to divide into pages, you can also pass in the configuration of `Pagination`, pass in different properties for lists through array	boolean \| PaginationProps \| Array<boolean \| PaginationProps>	`-`	Array format in '2.40.0'
searchPlaceholder	Placeholder of search box, pass in different properties for lists through array	string \| string[]	`-`	Array format in '2.40.0'
selectedKeys	Set of keys of selected items	string[]	`-`	-
showFooter	Whether to display the reset-button in columns, pass in different properties for lists through array	boolean \| ReactNode \| Array<boolean \| ReactNode>	`-`	ReactNode in `2.11.0`, array format in '2.40.0'
showSearch	Whether to display the search box in columns, pass in different properties for lists through array	boolean \| InputProps \| Array<boolean \| InputProps>	`-`	Array format in '2.40.0'
simple	Whether to automatically move an item when it is selected	\| boolean\| {retainSelectedItems?: boolean;}	`-`	`retainSelectedItems` in '2.21.0'
style	Additional style	CSSProperties	`-`	-
targetKeys	Set of keys of items that are listed on the target column	string[]	`-`	-
titleTexts	Title list of Transfer columns. (`2.18.0` began to support function)	Array<TransferListTitle>	`['Source', 'Target']`	-
virtualListProps	Pass properties used by VirtualList.	AvailableVirtualListProps	`-`	2.42.0
children	Customize render list	(props: TransferCustomListProps) => ReactNode	`-`	-
filterOption	A function to determine whether an item should show in search result list	(inputValue: string, item: TransferItem) => boolean	`(inputValue, item) => item.value.indexOf(inputValue) !== -1`	-
onResetData	Callback when reset-button is clicked	() => void	`-`	-
onSelectChange	Callback when selected items are changed	(leftSelectedKeys: string[], rightSelectedKeys: string[]) => void	`-`	-
render	A function to generate the item shown on a column.	(item: TransferItem) => any	`-`	-

TransferCustomListProps

export interface TransferCustomListProps
  extends Pick<
    TransferListProps,
    | "disabled"
    | "listType"
    | "selectedKeys"
    | "validKeys"
    | "selectedDisabledKeys"
  > {
  filteredItems: TransferItem[];
  onItemSelect: (key: string, selected: boolean) => void;
  onItemRemove: (key: string) => void;
  onItemSelectAll: (keys: string[], selected: boolean) => void;
}

TransferItem

export type TransferItem = {
  key: string;
  value: string;
  disabled?: boolean;
};

TransferListTitle

type TransferListTitle =
  | string
  | ((params: {
      countTotal: number;
      countSelected: number;
      clear: () => void;
      checkbox: ReactNode;
      searchInput: ReactNode;
    }) => ReactNode);

AvailableVirtualListProps

export type AvailableVirtualListProps = Pick<
  VirtualListProps<any>,
  | "height"
  | "itemHeight"
  | "threshold"
  | "isStaticItemHeight"
  | "scrollOptions"
  | "onScroll"
  | "wrapperChild"
>;

Transfer.Item

Property	Description	Type	Default
key	Unique identifier of transfer item	`string` (Required)	`-`
value	Value of transfer item	`string` (Required)	`-`
disabled	Whether this item is disabled	`boolean`	`-`