Skip to content
🚀  We're hiring a Designer, Full-stack Engineer, React Support Engineer, and more! 
Edit this page

Transfer List

A transfer list (or "shuttle") enables the user to move one or more list items between lists.

Basic transfer list

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

List item 1
List item 2
List item 3
List item 4
  • List item 5
    List item 6
    List item 7
    List item 8

  • Enhanced transfer list

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

    Choices0/4 selected
    List item 1
    List item 2
    List item 3
    List item 4
  • Chosen0/4 selected
    List item 5
    List item 6
    List item 7
    List item 8

  • Limitations

    The component comes with a couple of limitations:

    • It only works 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.
    • There are no high-level components exported from npm. The demos are based on composition. If this is important for you, have a look at #27579.

    API