Two list-boxes, side by side, one with available items, the other with selected items, with arrows in between to move items back and forth.

enter image description here


4 Answers 4


"Picklist" seems to be one name. https://www.google.com/search?q=picklist


Yep, whatever the items are that can be picked or chosen, plus the word "Picker" or "Chooser". I've seen this kind of design in a few financial systems where you can choose what fields to see in a grid. In which case the widget is known as a Field Picker or Column Chooser. I've also seen these with double arrow heads in both directions for quickly adding or removing all items.

You need to decide how to treat items that have been selected, i.e. moved from Available to Selected. Do they no longer appear under Available or do you highlight them as having been selected, e.g. greyed out and can no longer be moved? For example, if Available is a long list in alphabetical order, and the items under selected can be moved up and down, greyed out will make it easier to see if an item was available in the first place. This could be important if different users are looking at the same list and making changes independently of each other.


Material UI calls it a Transfer List

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.