Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.
User interface challenge
Transfer List
medium30 min
Build two lists with selectable items and controls that move selected items or all items in either direction, without duplication or losing selection in the other list.
Requirements
Initially the left list contains Apple, Banana, and Cherry; the right list contains Date and Fig. No items are selected.
Each checkbox is controlled by selection state. Move selected items only from the source list, preserving their source order and appending them after existing destination items.
Provide move-selected and move-all controls in both directions. Disable selected controls when their source has no selected items and all controls when their source is empty.
After a transfer, deselect the moved items. Preserve selections for items that were not moved, including selections in the other list. Never duplicate or lose an item.
Render No items for an empty list. Keep input labels, unique IDs, native buttons, selectors, and accessible list names.
All markup and styles are supplied. Update state immutably; no drag and drop, filtering, remote persistence, or list sorting is required.
Examples
Example 1
Input: Select Apple and Cherry, then move selected to the right.
Output: Left: Banana. Right: Date, Fig, Apple, Cherry.
The visible behavior is identical across React, Vue, and Angular.
What the tests check
Initial membership and disabled controls
Moves multiple selected items in source order
Moves selected right items back to the left
Preserves selection in the other list
Move-all empties the source and appends its items
All items can move back without loss or duplicates
Toggling selection off disables its transfer button
