TransferList.mdx

group	package	title	order	slug	category	description	props	import	source	docs	styles
mantine-core	@mantine/core	TransferList	1	/core/transfer-list/	inputs	Move items between two lists	TransferList	import { TransferList } from '@mantine/core';	mantine-core/src/TransferList/TransferList.tsx	core/TransferList.mdx	TransferList

import { TransferListDemos } from '@mantine/demos';

Usage

Native scrollbars

By default, TransferList uses ScrollArea to render list. If you want to use native scrollbars instead, set div as a list component:

Custom item component

To customize item appearance, replace default item component:

• Add additional props to data
• Build a component which will consume your data object
• Provide custom component via itemComponent prop
• Customize search with filter function

Initial selection

Set initial selected items with initialSelection prop. Value should be a tuple of two arrays which contain values from data:

Controlled search

You can optionally control the search inputs by providing searchValues and onSearch props. searchValues should be a tuple of two strings, one for each list:

Empty search VS empty list

You can specify a placeholder prop, which will be used in place of the nothingFound when a list is completely empty, and no query is set.

Custom wording for each list

placeholder, nothingFound and searchPlaceholder props can take a tuple of two strings instead of a single string to customize each list independently.

Grouping items

Responsive styles

Set breakpoint prop to specify at which breakpoint TransferList will collapse to 1 column:

// -> breakpoint from theme.breakpoints: value is theme.breakpoints.sm
<TransferList breakpoint="sm" />

// -> breakpoint in px: value is 755px
<TransferList breakpoint={755} />