Transfer List

Languages

Build a component that allows transferring 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.

Asked at these companies

Premium featurePurchase premium to see companies which ask this question.
View plans

Loading editor

    Transfer List in Vue | UI Interview Question