Transfer List
Problem statement
A Transfer List (also called a list shuttle) is a UI pattern for moving items between two lists — typically "Available" and "Selected". You see it in permission editors, tag selectors, and team assignment UIs. Your task is to build a Transfer List with two scrollable panels, checkboxes for multi-selection within each panel, and four action buttons to move selected items right, move all right, move selected left, and move all left.
The state management challenge is tracking two independent sets of selected items (one per panel) while the underlying items arrays themselves also change when items are transferred. Getting the state resets right after a transfer, and managing the independent selection states for two panels, is the core of this question.
Requirements & constraints
- Two panels side by side: Available (left) and Selected (right)
- Items in each panel can be individually checked with a checkbox
- Four action buttons between panels: move selected →, move all →, ← move selected, ← move all
- Moving selected items transfers only checked items and clears the selection
- Moving all items transfers the entire panel's contents and clears selection
- Buttons are disabled when there's nothing to transfer (empty source or empty selection)
- Item count badge shown in each panel header
How to approach Transfer List
The strategy an interviewer expects you to reach for.
Problem Understanding Transfer List is a state management question with two independent dimensions: the items (what's in each panel) and the selections (what's checked in each panel). These are four separate pieces of state that interact in specific ways during transfer operations.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.