My issue is something similar to this one - Best UI pattern for letting a user assign items to groups

I am looking for a good UI design for mapping items between 2 groups (only one-to-one mapping). These items can be under a parent or by itself. I thought of drag-and-drop/ having checkboxes (or switch like) to turn on for any one group.

Items Group 1 Group 2

Item A
Item A1 checkbox checkbox

Item B checkbox checkbox

  • Is the mapping unique? In the sense one group item can be uniquely grouped with a different item from the other group but not assignable to another item?
    – rohan
    Aug 15, 2020 at 0:16

2 Answers 2


Sounds like a transfer list could be what you're looking for.

A transfer list (or "shuttle") enables the user to move one or more list items between lists.

Transfer list_Material UI

(Note: both link and screenshot refer to Material UI. There might be other visualizations or implementation that might suit your needs better. Nonetheless, you should get the idea)


On the simplest level you could just try a dropdown which lets you select the item on the right - might not be fancy though.

On a little interactive method you could use something like s chord diagram where after a drag amd select you display the relationship.

Your Answer

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

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