Skip to content

Forms

Transfer

Move items between two lists, with search.

Ant Design: Transfer

import { Transfer } from '@alea/ui';

Props

`Transfer` props

Move items between two lists: available and chosen (Ant's Transfer).

Prop	Type	Default	Description
`items`required	`TransferItem[]`	-	All the items: id and label.
`defaultValue`	`Key[]`	-	The ids on the right to start with.
`onChange`	`((keys: Key[]) => void)`	-	Called with the ids on the right.
`searchable`	`boolean`	-	Adds a search field to each list.
`titles`	`[string, string]`	-	Titles of the two lists.
`value`	`Key[]`	-	Ids on the right side (controlled).

Two labelled lists; the move buttons say how many items they move and where.

Keyboard

Key	Does
`Arrow keys`	Move in a list
`Space`	Selects an item
`Tab`	Moves to the move buttons and the other list

Do and don't

Do

Name both lists clearly (Available, Selected).
Add search when either list is longer than ten items.

Don't

Don't use it for fewer than five items: use checkboxes.
Don't reorder items when they move.