| ariaMoveAllToSourceLabel | Move all to available | string |
Provides an accessible name for the button that moves every visible, enabled option back to the source list. |
| ariaMoveAllToTargetLabel | Move all to chosen | string |
Provides an accessible name for the button that moves every visible, enabled option to the target list. |
| ariaMovedAnnouncement | {count} moved to {title} | string |
What is announced after a move. {count} is how many options moved, {title} the destination's title, and both are replaced wherever they appear. |
| ariaMoveToSourceLabel | Move to available | string |
Provides an accessible name for the button that moves the selection back to the source list. |
| ariaMoveToTargetLabel | Move to chosen | string |
Provides an accessible name for the button that moves the selection to the target list. |
| className | - | string |
Adds custom classes to the React Transfer root element. |
| defaultValue | - | string[] |
The values the target list starts with, for the uncontrolled mode. Ignored when value is set. |
| disabled | - | boolean |
Turns the whole transfer off: both lists, both search fields and every move button. |
| indicator | checkbox | ListBoxIndicator |
Puts a mark in front of every option of both lists. |
| items | [] | ListBoxOption[] |
The values both lists are made of, in the order the source list shows them. |
| loading | - | TransferLoading |
Covers the wait of one list or of both: a loading list is marked aria-busy and shows a row with a spinner and loadingLabel below its options, which stay usable. |
| loadingLabel6.0.0+ | Loading… | string |
Text of the loading row below the options, announced to screen readers when the shown list starts loading or the list shows up loading. |
| onChange | - | ((value: string[], change: TransferChange) => void) |
Callback fired after a move, with the values of the target list and what the move was. |
| oneWay | - | boolean |
Takes the return trip away: both buttons that move back are gone and a chosen value stays chosen. |
| onSearch | - | ((side: TransferDirection, query: string) => void) |
Callback fired with the list the query belongs to and the query itself, every time one of them changes. |
| renderItem | - | ((item: ListBoxOption, index: number) => ReactNode) |
Renders one option yourself. It takes the option and its index, and the option's hidden is what the search leaves behind. |
| search | - | TransferSearch |
Puts a search field above each list. It hides what does not match, which takes those options out of the navigation, out of the counter and out of the select-all scope — the selection itself survives. 'external' filters nothing and only reports the query through onSearch, so the lists show whatever items holds. |
| searchPlaceholder | Search | string |
The placeholder of each search field, and the first half of its accessible name. |
| selectedLabel | (count: number, total: number) => `${count}/${total} selected` | CountLabel |
Passed to both list boxes as their header count text. A function (count, total) => string, or a string in which {count} and {total} are replaced. |
| sourceTitle | Available | string |
The title of the source list: the label of its select-all button and its accessible name. |
| targetTitle | Chosen | string |
The title of the target list. |
| typeahead | true | boolean |
Move the highlight to the option matching what the user types, in both lists. |
| value | - | string[] |
The values of the target list. Pair it with onChange; for the uncontrolled mode use defaultValue instead. |