Transfer List

Author
Svelte core team
Languages

Build a component that allows transferring of items between two lists.

Transfer List Example

Requirements

  • There are two lists each initially containing 4 items.
  • Each item has a checkbox that can be checked/unchecked.
  • Transferring
    • Clicking on the double arrow buttons will transfer all items from one list to the other, as specified by the direction of the arrows.
    • Clicking on the single arrow buttons will transfer only the selected items, as specified by the direction of the arrows.
    • Transferred items are added to the bottom of the destination list.
    • Item selection (checked) states are preserved after transferring.
    • Buttons are disabled if there are no relevant items to be transferred.
View solution