Selection
Transfer list
The animation here is not decoration, it is the explanation: an item that moves is the same element arriving in a new list, not one disappearing and a different one appearing, so nobody has to re-find what they just moved. Ticking and moving are deliberately separate steps, which makes a mis-tick free to correct, and the counts live in the headings because the question this control usually answers is 'how many have I picked'.
npx shadcn@latest add @minflow/transfer-listWhere to use it
- Assigning members to a team, columns to a view, permissions to a role - anywhere a subset is chosen from a known pool.
- When the chosen set needs to be reviewed as a whole, not just checked off item by item.
- Reach for Listbox or Combo box when the pool is long or unbounded - two panels of two hundred items helps nobody.
Variations
Empty to start
The standard case: everything begins on the available side and the target explains its own emptiness rather than sitting blank.
Editing an existing set
When the control is opened on something already configured. Starting populated changes the task from choosing to adjusting.