UI components · Form input
Transfer
Also called: Transfer list, Dual listbox, List builder, Shuttle
Two lists side by side with arrow buttons in between. You move items from the "available" side to the "selected" side to pick a batch.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstBuild a transfer for assigning members: the left column is "All members" and the right column is "Added." Each column has a search box and a "Select all" checkbox at the top, with a checkbox in front of each item. Put two arrow buttons in the middle, one above the other, grayed out when nothing is checked. Next to each column's title, show a count like "2 / 30 selected." When a list has more than 8 items, scroll inside the column.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Transfer is what you need.
Use Transfer when
- Picking a batch from dozens to hundreds of flat options while always seeing what's already selected
- Moving things between two groups, like assigning permissions to a role or adding members to a project
- Choosing fields to export or display, and possibly adjusting the selected ones
Pick something else when
The data has a clear parent-child structure; use a tree with checkboxes
Use insteadTreeThe form only needs one value picked
Narrow screens like phones, where two columns can't fit side by side
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Neither column has a search box, so users have to scroll through hundreds of items one by one
- 02
The middle buttons have no disabled state, so clicking them with nothing checked does nothing
- 03
Neither column shows a count, so users can't tell how many they've picked
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
Two panels, left and right, each with a title, a search box, and a checkbox list, plus buttons in the middle for moving items left and right.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A transfer has two columns: all available items on the left, selected items on the right, and two arrow buttons (right and left) in between. The user checks a few items on the left and clicks the right arrow to move them over, and can move them back the same way. Each column usually has a search box and a "Select all" checkbox at the top, and shows a count like "3 / 20 selected." Typical uses: assigning permissions to a role, choosing which fields to export, and adding members to a project team.
Compared with a Select in multi-select mode, a transfer lets you see "what I picked" and "what's left" at the same time, so it suits picking a batch from dozens to hundreds of items. How it differs from a Tree: use a tree with checkboxes when the data has levels, and a transfer when the data is a flat list. It's even further from a Cascader, which picks one value along a hierarchy.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-transfer- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.ant-transfer.el-transfer.arco-transfer.t-transfer.n-transfer
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026