Best UI pattern to allow the user to assign 1 level nested items to two groups

Question

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

rohan · Answer

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.

QWERTZdenker · Answer

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.

(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)

Best UI pattern to allow the user to assign 1 level nested items to two groups

2 Answers

Add your own answers!

Ask a Question