Ant Design

⌘ K

6.4.3

Transfer

Double column transfer choice box.

Importimport { Transfer } from 'antd';

GitHub

components/transfer Issue Open issues

Docs

Edit this page LLMs.md

contributors

TimePicker TreeSelect

Ant Design

⌘ K

6.4.3

Transfer

Double column transfer choice box.

Importimport { Transfer } from 'antd';

GitHub

components/transfer Issue Open issues

Docs

Edit this page LLMs.md

contributors

TimePicker TreeSelect

When To Use

It is a select control essentially which can be used for selecting multiple items.
Transfer can display more information for items and take up more space.

Transfer the elements between two columns in an intuitive and efficient way.

One or more elements can be selected from either column, one click on the proper direction button, and the transfer is done. The left column is considered the source and the right column is considered the target. As you can see, these names are reflected in the API.

notice: Transfer is a controlled component, uncontrolled mode is not supported.

Examples

API

Common props ref：Common props

Property	Description	Type	Default	Version
actions	A set of operations that are sorted from top to bottom. When an array of strings is provided, default buttons will be used; when an array of ReactNode is provided, custom elements will be used	ReactNode[]	[`>`, `<`]	6.0.0
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
dataSource	Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop	RecordType extends TransferItem = TransferItem[]	[]
disabled	Whether disabled transfer	boolean	false
selectionsIcon	custom dropdown icon	React.ReactNode		5.8.0
filterOption	A function to determine whether an item should show in search result list, only works when searching, (add `direction` support since 5.9.0+)	(inputValue, option, direction: `left` \| `right`): boolean	-
footer	A function used for rendering the footer	(props, { direction }) => ReactNode	-	direction: 4.17.0
~~listStyle~~	A custom CSS style used for rendering the transfer columns. Use `styles.section` instead	object \| ({direction: `left` \| `right`}) => object	-
locale	The i18n text including filter, empty text, item unit, etc	{ itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode \| ReactNode[]; }	{ itemUnit: `item`, itemsUnit: `items`, notFoundContent: `The list is empty`, searchPlaceholder: `Search here` }
oneWay	Display as single direction style	boolean	false	4.3.0
~~operations~~	A set of operations that are sorted from top to bottom. Use `actions` instead.	string[]	[`>`, `<`]
~~operationStyle~~	A custom CSS style used for rendering the operations column. Use `styles.actions` instead.	object	-
pagination	Use pagination. Not work in render props	boolean \| { pageSize: number, simple: boolean, showSizeChanger?: boolean, showLessItems?: boolean }	false	4.3.0
render	The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a React element which is generated from that record. Also, it can return a plain object with `value` and `label`, `label` is a React element and `value` is for title	(record) => ReactNode	-
selectAllLabels	A set of customized labels for select all checkboxes on the header	(ReactNode \| (info: { selectedCount: number, totalCount: number }) => ReactNode)[]	-
selectedKeys	A set of keys of selected items	string[] \| number[]	[]
showSearch	If included, a search box is shown on each column	boolean \| { placeholder:string,defaultValue:string }	false
showSelectAll	Show select all checkbox on the header	boolean	true
status	Set validation status	'error' \| 'warning'	-	4.19.0
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-
targetKeys	A set of keys of elements that are listed on the right column	string[] \| number[]	[]
titles	A set of titles that are sorted from left to right	ReactNode[]	-
onChange	A callback function that is executed when the transfer between columns is complete	(targetKeys, direction, moveKeys): void	-
onScroll	A callback function which is executed when scroll options list	(direction, event): void	-
onSearch	A callback function which is executed when search field are changed	(direction: `left` \| `right`, value: string): void	-
onSelectChange	A callback function which is executed when selected items are changed	(sourceSelectedKeys, targetSelectedKeys): void	-

Render Props

Transfer accept children to customize render list, using follow props:

Property	Description	Type
direction	List render direction	`left` \| `right`
disabled	Disable list or not	boolean
filteredItems	Filtered items	RecordType[]
selectedKeys	Selected items	string[] \| number[]
onItemSelect	Select item	(key: string \| number, selected: boolean)
onItemSelectAll	Select a group of items	(keys: string[] \| number[], selected: boolean)

example

jsx

<Transfer {...props}>{(listProps) => <YourComponent {...listProps} />}</Transfer>

Warning

According to the standard of React, the key should always be supplied directly to the elements in the array. In Transfer, the keys should be set on the elements included in dataSource array. By default, key property is used as a unique identifier.

If there's no key in your data, you should use rowKey to specify the key that will be used to uniquely identify each element.

jsx

// eg. your primary key is `uid`
return <Transfer rowKey={(record) => record.uid} />;

Semantic DOM

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
headerHeight	Height of header	string \| number	40
itemHeight	Height of list item	string \| number	32
itemPaddingBlock	Vertical padding of list item	string \| number	5
listHeight	Height of list	string \| number	200
listWidth	Width of list	string \| number	180
listWidthLG	Width of large list	string \| number	250

Global TokenHow to use?

Token Name	Description	Type	Default Value
colorBgContainer	Container background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`.	string	#ffffff
colorBgContainerDisabled	Control the background color of container in disabled state.	string	rgba(0,0,0,0.04)
colorBorder	Default border color, used to separate different elements, such as: form separator, card separator, etc.	string	#d9d9d9
colorError	Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc.	string	#ff4d4f
colorLink	Control the color of hyperlink.	string	#1677ff
colorLinkActive	Control the color of hyperlink when clicked.	string	#0958d9
colorLinkHover	Control the color of hyperlink when hovering.	string	#69b1ff
colorPrimaryBorder	The stroke color under the main color gradient, used on the stroke of components such as Slider.	string	#91caff
colorSplit	Used as the color of separator, this color is the same as colorBorderSecondary but with transparency.	string	rgba(5,5,5,0.06)
colorText	Default text color which comply with W3C standards, and this color is also the darkest neutral color.	string	rgba(0,0,0,0.88)
colorTextDisabled	Control the color of text in disabled state.	string	rgba(0,0,0,0.25)
colorTextSecondary	The second level of text color is generally used in scenarios where text color is not emphasized, such as label text, menu text selection state, etc.	string	rgba(0,0,0,0.65)
colorWarning	Used to represent the warning map token, such as Notification, Alert, etc. Alert or Control component(like Input) will use these map tokens.	string	#faad14
borderRadiusLG	LG size border radius, used in some large border radius components, such as Card, Modal and other components.	number	8
controlHeightLG	LG component height	number	40
controlItemBgActive	Control the background color of control component item when active.	string	#e6f4ff
controlItemBgActiveHover	Control the background color of control component item when hovering and active.	string	#bae0ff
controlItemBgHover	Control the background color of control component item when hovering.	string	rgba(0,0,0,0.04)
fontFamily	The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	The most widely used font size in the design system, from which the text gradient will be derived.	number	14
fontSizeIcon	Control the font size of operation icon in Select, Cascader, etc. Normally same as fontSizeSM.	number	12
lineHeight	Line height of text.	number	1.5714285714285714
lineType	Border style of base components	string	solid
lineWidth	Border width of base components	number	1
lineWidthFocus	Control the width of the line when the component is in focus state.	number	3
linkDecoration	Control the text decoration style of a link.	TextDecoration<string \| number> \| undefined	none
linkFocusDecoration	Control the text decoration style of a link on focus.	TextDecoration<string \| number> \| undefined	none
linkHoverDecoration	Control the text decoration style of a link on mouse hover.	TextDecoration<string \| number> \| undefined	none
marginXS	Control the margin of an element, with a small size.	number	8
marginXXS	Control the margin of an element, with the smallest size.	number	4
motionDurationSlow	Motion speed, slow speed. Used for large element animation interaction.	string	0.3s
paddingSM	Control the small padding of the element.	number	12
paddingXS	Control the extra small padding of the element.	number	8

FAQ

How to support fetch and present data from a remote server in Transfer column.

In order to keep the page number synchronized, you can disable columns you checked without removing the option: https://codesandbox.io/s/objective-wing-6iqbx

When To Use

It is a select control essentially which can be used for selecting multiple items.
Transfer can display more information for items and take up more space.

Transfer the elements between two columns in an intuitive and efficient way.

One or more elements can be selected from either column, one click on the proper direction button, and the transfer is done. The left column is considered the source and the right column is considered the target. As you can see, these names are reflected in the API.

notice: Transfer is a controlled component, uncontrolled mode is not supported.

Examples

Basic

The most basic usage of Transfer involves providing the source data and target keys arrays, plus the rendering and some callback functions.

One Way

Use oneWay to make Transfer the one way style.

Search

Transfer with a search box.

Advanced

Advanced Usage of Transfer.

You can customize the labels of the transfer buttons, the width and height of the columns, and what should be displayed in the footer.

Custom datasource

Customize each Transfer Item, allowing you to render a complex datasource.

Custom Actions

You can customize operations with the actions prop. This example demonstrates how to customize actions, including handling disabled and loading states.

When actions is an array of strings, it will use the default Button component and set the strings as button text.

When actions is an array of React elements, it will use these elements directly as action buttons, allowing you to use custom button components, such as buttons with loading state in this example.

Note:

When using custom buttons, the Transfer component will automatically handle the button's disabled state and click events.
You can add a disabled property to your custom button to control its disabled state.
You can add an onClick event handler to your custom button, which will be merged with the Transfer component's internal handler.

6.0.0

Pagination

Store a large amount of items with pagination.

Table Transfer

Customize the render list with a Table component.

Tree Transfer

Customize the render list with a Tree component.

Status

Add status to Transfer with status, which could be error or warning.

Custom semantic dom styling

You can customize the semantic dom style of Transfers by passing objects/functions through classNames and styles.

6.0.0

API

Common props ref：Common props

Property	Description	Type	Default	Version
actions	A set of operations that are sorted from top to bottom. When an array of strings is provided, default buttons will be used; when an array of ReactNode is provided, custom elements will be used	ReactNode[]	[`>`, `<`]	6.0.0
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
dataSource	Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop	RecordType extends TransferItem = TransferItem[]	[]
disabled	Whether disabled transfer	boolean	false
selectionsIcon	custom dropdown icon	React.ReactNode		5.8.0
filterOption	A function to determine whether an item should show in search result list, only works when searching, (add `direction` support since 5.9.0+)	(inputValue, option, direction: `left` \| `right`): boolean	-
footer	A function used for rendering the footer	(props, { direction }) => ReactNode	-	direction: 4.17.0
~~listStyle~~	A custom CSS style used for rendering the transfer columns. Use `styles.section` instead	object \| ({direction: `left` \| `right`}) => object	-
locale	The i18n text including filter, empty text, item unit, etc	{ itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode \| ReactNode[]; }	{ itemUnit: `item`, itemsUnit: `items`, notFoundContent: `The list is empty`, searchPlaceholder: `Search here` }
oneWay	Display as single direction style	boolean	false	4.3.0
~~operations~~	A set of operations that are sorted from top to bottom. Use `actions` instead.	string[]	[`>`, `<`]
~~operationStyle~~	A custom CSS style used for rendering the operations column. Use `styles.actions` instead.	object	-
pagination	Use pagination. Not work in render props	boolean \| { pageSize: number, simple: boolean, showSizeChanger?: boolean, showLessItems?: boolean }	false	4.3.0
render	The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a React element which is generated from that record. Also, it can return a plain object with `value` and `label`, `label` is a React element and `value` is for title	(record) => ReactNode	-
selectAllLabels	A set of customized labels for select all checkboxes on the header	(ReactNode \| (info: { selectedCount: number, totalCount: number }) => ReactNode)[]	-
selectedKeys	A set of keys of selected items	string[] \| number[]	[]
showSearch	If included, a search box is shown on each column	boolean \| { placeholder:string,defaultValue:string }	false
showSelectAll	Show select all checkbox on the header	boolean	true
status	Set validation status	'error' \| 'warning'	-	4.19.0
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-
targetKeys	A set of keys of elements that are listed on the right column	string[] \| number[]	[]
titles	A set of titles that are sorted from left to right	ReactNode[]	-
onChange	A callback function that is executed when the transfer between columns is complete	(targetKeys, direction, moveKeys): void	-
onScroll	A callback function which is executed when scroll options list	(direction, event): void	-
onSearch	A callback function which is executed when search field are changed	(direction: `left` \| `right`, value: string): void	-
onSelectChange	A callback function which is executed when selected items are changed	(sourceSelectedKeys, targetSelectedKeys): void	-

Render Props

Transfer accept children to customize render list, using follow props:

Property	Description	Type
direction	List render direction	`left` \| `right`
disabled	Disable list or not	boolean
filteredItems	Filtered items	RecordType[]
selectedKeys	Selected items	string[] \| number[]
onItemSelect	Select item	(key: string \| number, selected: boolean)
onItemSelectAll	Select a group of items	(keys: string[] \| number[], selected: boolean)

example

jsx

<Transfer {...props}>{(listProps) => <YourComponent {...listProps} />}</Transfer>

Warning

According to the standard of React, the key should always be supplied directly to the elements in the array. In Transfer, the keys should be set on the elements included in dataSource array. By default, key property is used as a unique identifier.

If there's no key in your data, you should use rowKey to specify the key that will be used to uniquely identify each element.

jsx

// eg. your primary key is `uid`
return <Transfer rowKey={(record) => record.uid} />;

Semantic DOM

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
headerHeight	Height of header	string \| number	40
itemHeight	Height of list item	string \| number	32
itemPaddingBlock	Vertical padding of list item	string \| number	5
listHeight	Height of list	string \| number	200
listWidth	Width of list	string \| number	180
listWidthLG	Width of large list	string \| number	250

Global TokenHow to use?

Token Name	Description	Type	Default Value
colorBgContainer	Container background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`.	string	#ffffff
colorBgContainerDisabled	Control the background color of container in disabled state.	string	rgba(0,0,0,0.04)
colorBorder	Default border color, used to separate different elements, such as: form separator, card separator, etc.	string	#d9d9d9
colorError	Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc.	string	#ff4d4f
colorLink	Control the color of hyperlink.	string	#1677ff
colorLinkActive	Control the color of hyperlink when clicked.	string	#0958d9
colorLinkHover	Control the color of hyperlink when hovering.	string	#69b1ff
colorPrimaryBorder	The stroke color under the main color gradient, used on the stroke of components such as Slider.	string	#91caff
colorSplit	Used as the color of separator, this color is the same as colorBorderSecondary but with transparency.	string	rgba(5,5,5,0.06)
colorText	Default text color which comply with W3C standards, and this color is also the darkest neutral color.	string	rgba(0,0,0,0.88)
colorTextDisabled	Control the color of text in disabled state.	string	rgba(0,0,0,0.25)
colorTextSecondary	The second level of text color is generally used in scenarios where text color is not emphasized, such as label text, menu text selection state, etc.	string	rgba(0,0,0,0.65)
colorWarning	Used to represent the warning map token, such as Notification, Alert, etc. Alert or Control component(like Input) will use these map tokens.	string	#faad14
borderRadiusLG	LG size border radius, used in some large border radius components, such as Card, Modal and other components.	number	8
controlHeightLG	LG component height	number	40
controlItemBgActive	Control the background color of control component item when active.	string	#e6f4ff
controlItemBgActiveHover	Control the background color of control component item when hovering and active.	string	#bae0ff
controlItemBgHover	Control the background color of control component item when hovering.	string	rgba(0,0,0,0.04)
fontFamily	The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	The most widely used font size in the design system, from which the text gradient will be derived.	number	14
fontSizeIcon	Control the font size of operation icon in Select, Cascader, etc. Normally same as fontSizeSM.	number	12
lineHeight	Line height of text.	number	1.5714285714285714
lineType	Border style of base components	string	solid
lineWidth	Border width of base components	number	1
lineWidthFocus	Control the width of the line when the component is in focus state.	number	3
linkDecoration	Control the text decoration style of a link.	TextDecoration<string \| number> \| undefined	none
linkFocusDecoration	Control the text decoration style of a link on focus.	TextDecoration<string \| number> \| undefined	none
linkHoverDecoration	Control the text decoration style of a link on mouse hover.	TextDecoration<string \| number> \| undefined	none
marginXS	Control the margin of an element, with a small size.	number	8
marginXXS	Control the margin of an element, with the smallest size.	number	4
motionDurationSlow	Motion speed, slow speed. Used for large element animation interaction.	string	0.3s
paddingSM	Control the small padding of the element.	number	12
paddingXS	Control the extra small padding of the element.	number	8

FAQ

How to support fetch and present data from a remote server in Transfer column.

In order to keep the page number synchronized, you can disable columns you checked without removing the option: https://codesandbox.io/s/objective-wing-6iqbx

Basic

The most basic usage of Transfer involves providing the source data and target keys arrays, plus the rendering and some callback functions.

One Way

Use oneWay to make Transfer the one way style.

Search

Transfer with a search box.

Advanced

Advanced Usage of Transfer.

You can customize the labels of the transfer buttons, the width and height of the columns, and what should be displayed in the footer.

Custom datasource

Customize each Transfer Item, allowing you to render a complex datasource.

Custom Actions

You can customize operations with the actions prop. This example demonstrates how to customize actions, including handling disabled and loading states.

When actions is an array of strings, it will use the default Button component and set the strings as button text.

When actions is an array of React elements, it will use these elements directly as action buttons, allowing you to use custom button components, such as buttons with loading state in this example.

Note:

When using custom buttons, the Transfer component will automatically handle the button's disabled state and click events.
You can add a disabled property to your custom button to control its disabled state.
You can add an onClick event handler to your custom button, which will be merged with the Transfer component's internal handler.

6.0.0

Pagination

Store a large amount of items with pagination.

Table Transfer

Customize the render list with a Table component.

Tree Transfer

Customize the render list with a Tree component.

Status

Add status to Transfer with status, which could be error or warning.

Custom semantic dom styling

You can customize the semantic dom style of Transfers by passing objects/functions through classNames and styles.

6.0.0

0 item

No data

0 item

No data

0 item

No data

0 item

No data

0 item

No data

0 item

No data

20 items

Name	Tag	Description
content1	CAT	description of content1
content2	DOG	description of content2
content3	BIRD	description of content3
content4	CAT	description of content4
content5	DOG	description of content5
content6	BIRD	description of content6
content7	CAT	description of content7
content8	DOG	description of content8
content9	BIRD	description of content9
content10	CAT	description of content10

1
2

0 item

	Name	Tag	Description
No data

7 items

0-0

0-1

0-1-0

0-1-1

0-2

0-3

0-4

0 item

No data

0 item

No data

0 item

No data

0 item

No data

0 item

No data

Transfer

Transfer

When To Use

Examples

API

Render Props

example

Warning

Semantic DOM

Design Token

FAQ

How to support fetch and present data from a remote server in Transfer column.

When To Use

Examples

API

Render Props

example

Warning

Semantic DOM

Design Token

FAQ

How to support fetch and present data from a remote server in Transfer column.

root

section

source.section

target.section

source.header

target.header

source.title

target.title

source.body

target.body

source.list

target.list

source.item

target.item

source.itemIcon

target.itemIcon

source.itemContent

target.itemContent

source.footer

target.footer

header

title

body

list

item

itemIcon

itemContent

footer

actions