TransferList

Open in Playground

Two lists with checkboxes and buttons to move items between them: pick what to include, which permissions to grant, who to invite. items is everything; value holds the keys that are in the right-hand list and onChange receives the new keys.

Tick items and use the single arrows to move the ticked ones, or the double arrows to move everything that can move. The header checkbox ticks a whole list. A disabled item stays where it is.

Props

items{ key, label, disabled? }[]
Every item.
valuestring[]
Keys of the items in the right-hand list (controlled).
defaultValuestring[]
Default: []
Initial right-hand keys when uncontrolled.
onChange(keys: string[]) => void
Receives the keys now in the right-hand list.
titles[string, string]
Default: ['Choices', 'Chosen']
Headings of the two lists.
heightnumber
Default: 220
Height of each list in px.
labelstring
Default: 'Transfer list'
Accessible name of the whole control.
classNamestring
Default: ''
Extra classes for the root element.

TransferList props
Prop	Type	Default	Description
`items`	{ key, label, disabled? }[]	–	Every item.
`value`	string[]	–	Keys of the items in the right-hand list (controlled).
`defaultValue`	string[]	`[]`	Initial right-hand keys when uncontrolled.
`onChange`	(keys: string[]) => void	–	Receives the keys now in the right-hand list.
`titles`	[string, string]	`['Choices', 'Chosen']`	Headings of the two lists.
`height`	number	`220`	Height of each list in px.
`label`	string	`'Transfer list'`	Accessible name of the whole control.
`className`	string	`''`	Extra classes for the root element.