Input & controls

Transfer / Shuttle

Q: How do I implement a Transfer / Shuttle?

Use a transfer for role assignment: source left, chosen right, checkboxes + center move buttons, search per column, counts in headers. Both lists are multiselectable listboxes; after a move, focus follows the moved items.

Move items between two lists so the chosen set stays visible and editable.

Also known as dual listbox · shuttle box · two-column multi-select

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Transfer / Shuttle".

Use a transfer for role assignment: source left, chosen right, checkboxes + center move buttons, search per column, counts in headers. Both lists are multiselectable listboxes; after a move, focus follows the moved items.

Anatomy:
- source list: Left: everything available.
- target list: Right: chosen set—the point of the pattern.
- transfer buttons: Move checked items either way.
- list search: Per column when lists are long.

Preferred API / pattern: `custom dual list / react-windowed variants`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Dumping hundreds of thousands of rows into the left list
○Avoid: Focus stays put after move
○Avoid: No per-list search on long sets.
○Avoid: Forcing dual columns on a phone

In plain wordsHow people search for it

“two lists side by side where I move people into the “selected” column”“that admin control with left available and right chosen”“shuttling items across with > and < buttons”

AnatomyOpen for part names

source list: Left: everything available.
target list: Right: chosen set—the point of the pattern.
transfer buttons: Move checked items either way.
list search: Per column when lists are long.

How to write itOpen for stack patterns

Web (HTML/CSS)dual listbox + move buttons (no native)

React + Tailwind + shadcn/uicustom dual list / react-windowed variants

SwiftUItwo Lists with move actions

Ant Design<Transfer dataSource targetKeys showSearch />

Notes

Same problem as multi-select, different when “what’s already chosen” must be audited—roles for 20 people, 30 of 500 courses. Tags in a select can’t carry that review. Heavy footprint → mostly desktop admin. Mobile usually becomes full-screen multi-select + a “Selected” sheet. Move focus with the items.

Common mistakesHumans and models trip here

Dumping hundreds of thousands of rows into the left list: pre-filter/search-to-add instead.
Focus stays put after move: keyboard users lose the item.
No per-list search on long sets.
Forcing dual columns on a phone: switch to a mobile-friendly multi-select pattern.

More failure symptoms on AI broke it.

Related patterns

Select / ComboboxA form control for choosing one (or more) options from a list.Checkbox & RadioCheckboxes for multi-select; radios for a single choice in a group.Tree ViewA hierarchical list where nodes expand and collapse to reveal children.Data TableA grid of rows and columns for comparing structured records.

Spotted a wrong name or missing pattern?

Message on X