Transfer list

Problem Context

• The user must compare available and selected items at the same time.
• Selected items are submitted, persisted, ordered, required, capped, or otherwise treated differently from available items.
• Users may need to add or remove more than one item in a batch.
• The item set is too large or structured for a short checkbox group but the selected set needs more review than compact chips provide.
• Keyboard users need explicit controls for movement and ordering rather than pointer-only drag and drop.

Selection Rules

• Choose transfer list when the interface has a source collection and a destination collection, and moving items between them is the core task.
• Use multi-select when users only need to choose several values from a compact picker and can review selected chips or tags without seeing the full available set.
• Use a standalone listbox when the task is selecting within one visible list, not moving items between two lists.
• Use checkbox group when all options are few enough to remain visible and order does not matter.
• Use data grid, table, or collection management when rows have independent actions, columns, rich metadata, or bulk operations beyond move and reorder.
• Provide filter or search for long source panes, but never let filtering hide or clear the selected destination set.
• Use selected-pane reorder controls only when order is persisted or meaningful; avoid adding reorder chrome to unordered sets.
• Avoid transfer list on mobile unless the two-pane interaction is replaced with a step, stacked panes, or review screen that preserves add, remove, and selected-set review.

Required States

• Available list initial state with label, count, and selectable options.
• Selected list initial state with label, count, empty message, or existing selected items.
• One or more source items selected for transfer.
• One or more destination items selected for removal or reorder.
• Add and remove controls enabled only when a valid selection exists.
• Add all and remove all controls when bulk transfer is supported.
• Destination item first and last states for reorder control disabling.
• Required locked selected item state.
• Minimum, maximum, required, and empty-selected-set validation states.
• Live confirmation after add, remove, bulk move, or reorder.
• Filtered source list state that preserves selected destination items.
• Stacked high-zoom layout state with direction labels that still make sense.

Interaction Contract

• Each pane has a visible label and accessible name that describes whether it contains available or selected items.
• Items in each pane expose option selection state, and multi-select panes expose multi-selection semantics when custom listbox roles are used.
• Add moves selected source items to the selected pane and removes them from the available pane unless the product explicitly uses a copy model.
• Remove moves selected destination items back to the available pane unless the item is locked, required, or otherwise non-removable.
• Move-up and move-down controls affect only selected destination items and are disabled at the relevant boundary.
• Disabled controls communicate why no action is available and do not fire silent no-op changes.
• After a move, focus lands on a remaining nearby option or a relevant action button, and a live region announces what changed.
• Validation preserves both panes, selected items, focusable controls, and the user's current selections.

Implementation Checklist

• Confirm that users really need a source and destination model instead of checkbox group, multi-select, listbox, or table management.
• Label both panes, include counts, and make the selected pane read as the final submitted set.
• Use native select multiple or accessible listbox semantics with aria-multiselectable, aria-selected, visible focus, and typeahead where appropriate.
• Implement Add, Remove, optional Add all and Remove all, and optional Move up and Move down controls with disabled states tied to current selection.
• Preserve selected destination items during filtering, validation, async refresh, route changes, and save errors.
• Announce add, remove, and reorder results in a live region and keep focus on the moved item or the nearest useful remaining item.
• Handle min, max, required, locked item, duplicate label, empty source, empty destination, and long-list states.
• Test keyboard, screen reader, high zoom above 200 percent, forced colors, touch fallback, localization, long item names, and bulk move performance.

Common Generated-UI Mistakes

• Using transfer list for a short yes-or-no set that should be checkboxes.
• Using transfer list for one required value that should be select, radio group, or combobox.
• Hiding selected values behind a count instead of showing the destination pane.
• Leaving move buttons enabled when no source or destination item is selected.
• Making drag and drop the only way to transfer or reorder items.
• Clearing selected items when filtering or refreshing the available list.
• Using arrow icons without text or accessible names, especially in stacked or high-zoom layouts.
• Persisting selected order while providing no keyboard-accessible reorder controls.

Critique Questions

• Do users need to see both available and selected sets at the same time?
• Is the selected pane clearly the set that will be saved or submitted?
• Do move buttons, counts, locked items, and validation explain what can and cannot change right now?
• Can keyboard users add, remove, bulk move, and reorder without drag and drop?
• Does filtering or async loading preserve the selected destination list?