Transfer List

A transfer list (or "shuttle") lets users move items between lists. Material UI has no Transfer List component; these demos build one by composition.

Basic transfer list

For completeness, this example includes buttons for "move all", but not every transfer list needs these.

Enhanced transfer list

This example exchanges the "move all" buttons for a "select all / select none" checkbox and adds a counter.

Limitations

These demos only work well on desktop. If you have a limited amount of options to select, prefer the Autocomplete component. If mobile support is important for you, have a look at #27579.

Accessibility

The demos partially follow the multi-select ARIA Listboxes with Rearrangeable Options example. They move focus directly to list items instead of using aria-activedescendant on the listbox.

When composing a transfer list:

• Give each list an accessible name using aria-labelledby to reference a visible label, or aria-label.
• Label transfer buttons clearly and ensure focus remains predictable after moving items, including when a list becomes empty.
• If a focused button becomes disabled, explicitly move focus to a logical target so keyboard users can continue.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <Button />
• <Checkbox />
• <ListItemIcon />
• <ListItemText />
• <MenuItem />
• <MenuList />