opinion
Transfer
Two lists with arrows between them: check items, move them across.
ReviewersCheck people on one side and move them across
Available (3)
Reviewers (1)
Crew (2)
Interview now (0)
No items
In context
Share a projectChoose who can open Harbour rebrand
Share Harbour rebrandFour people on the team
Team (2)
Has access (2)
Props
| Prop | Type | Required | Default |
|---|---|---|---|
items | TransferItem[] | Yes | — |
value | string[] | undefined | No | — |
defaultValue | string[] | undefined | No | [] |
onValueChange | ((keys: string[]) => void) | undefined | No | — |
sourceTitle | string | undefined | No | Available |
targetTitle | string | undefined | No | Selected |
className | string | undefined | No | — |
State
value says which side each item lives on. The component only keeps which rows are ticked in each list, cleared after a move.
data-rebar-* attributes
data-rebar-component="transfer"; data-rebar-part="source-panel"|"target-panel"|"actions"|"move-to-target"|"move-to-source"|"panel-header"|"panel-list"|"panel-row"|"panel-empty".
Migrating to Ant Design
AntD's Transfer is a close equivalent: items, value, onValueChange map to dataSource, targetKeys, onChange; sourceTitle/targetTitle map to titles.