Transfer List
A dual-column transfer component for moving items between two lists. Inspired by Ant Design's Transfer, built with @cs-coe registry components.
Live Demo
Features
Select and transfer
Check items in either column and use the arrow buttons to move them. Single-arrow moves checked items; double-arrow moves all.
Select all / deselect all
The header checkbox toggles all selectable items in that column. Disabled items are skipped.
Search filtering
Type in the search box to filter items by name or description. Selection state is preserved across searches.
Disabled items
Items marked as disabled cannot be selected or transferred. They display a "locked" badge and reduced opacity.
Keyboard accessible
Tab between panels and buttons. Space/Enter toggles checkboxes. All actions are reachable without a mouse.
Components Used
@cs-coe/checkbox@cs-coe/button@cs-coe/input@cs-coe/badge@cs-coe/scroll-area@cs-coe/separatorWhen to Use
Use a transfer list when users need to move items between two groups — for example, selecting genes for an analysis panel, assigning users to roles, or choosing columns to display in a report.
Prefer a multi-select dropdown when the item count is small (<10) or screen space is limited. Use a transfer list when items have descriptions, the list is long, or users need to see both "available" and "selected" at the same time.