Implementation of setting multiple values/objects as valid/invalid

Question

I have some kind of modal where I need to show dates (each one is representing an object). Every date can be set as valid or invalid. I'm wondering how the UI should look like. I'm thinking about two options:

• radio buttons:
  
• transfer list:
  
  I am not sure what is the best solution here. Of course I am open to any other ideas. Any advice form the UX point of view? :)

Answer 1

Analysing both examples what I can say from an user perspective to perform the action it will take:

• 2 clicks using radiobuttons. One click to select the radiobutton and one click to 'Save/Confirm' the action.

• 3 clicks using the second option. One click to select the element, one click to 'move' it to the other container. And finally a third click to 'Save/Confirm' the action.

Looking at this, I would go to the radiobutton option. However, I would like to suggest other options for the same problem.

First, I would like to know the number of elements that you could list. Are they many? If so, maybe a scroll bar would be a good option. Not the best to be used in a modal, but much better than a pagination, in my opinion.

1. Agreeing with Aaron about the use of switch buttons.

2. Using checkboxes. It's cleaner for representing two possible states that are exclusive.

Answer 2

I like the radiobuttons much more! Its super simple and clear! Radiobuttons sadly aren't all that 'stylisch' so i would suggest making an on/off switch or something in that branch. I've put an example below, the way I would do it. Good luck!

Answer 3

Along with the already given answers, the switch would be a good for the situation. I'd like to contribute the following format as a way to style the selections. Selecting the valid dates assumes the non selected dates are invalid.