I have two set of fields, fields A, B, C, and D and fields 1, 2, 3, and 4.

Total two sets of fields, each with four fields of their own.

If user choose to fill in alphabets then they are not allow to fill in numbers.

If user choose to fill in numbers then they are not allow to fill in alphabets.

So far my solution is either use drop down list or radio button to group these two set of fields, but it's an extra step for user to pick option from radio button\drop down list.

What's the best way to present this to user? So that at first glance, they know exactly what to do.

  • 1
    unclear: is the user supposed to choose one of the sets, then only put in either letters or numbers, depending on what they choose? Do you have a mock that shows your efforts so far? What is the context? – Mike M Sep 28 '17 at 4:19
  • The "extra step" is good, as then they will know what to do. If you present all the options, then switch some off when you start filling in the other set, that'll be jarring and also make it harder to change your mind. I'd use radio button pair here, as most people know what that does. – Steve Jones Sep 28 '17 at 8:01
  • I'm really missing context for this question to be honest. Why would you want to have this kind of set-up? – Wendy Wojenka Sep 28 '17 at 8:46

Assuming I understood you correctly -


download bmml source – Wireframes created with Balsamiq Mockups


The following is a good option you may consider (The "best" depenends from many factors like context, type of users etc and sometimes it may require a usability testing of alternative solutions) :

  • Show initially all fields empty and enterable
  • When the user clicks to a field of any set, then disable all fields of the other set
  • The user may return back to all enabled fields by pressing the "Clear" button, that will clear all fields and make them enterable.
  • Add appropriate labels to make visibly clear that it is either the one or the other, for example you may add the "OR" label on the second set.

Something like this :


download bmml source – Wireframes created with Balsamiq Mockups

  • Suggestion: Not when the user_clicks_ a field, but once the user starts entering values you can disable the other set. Similarly, when a user clears all fields (manually or button), re-enable the other set. This still fullfills the purpose, but is easier if the user accidentally clicks the wrong set. – R-D Sep 28 '17 at 7:25
  • I'd prefer to see "Option A" and "Option B" as radio buttons here, as it makes it much more explicit. – Steve Jones Sep 28 '17 at 7:58
  • @SteveJones the extra step of expllicitly selecting is ruled out in the question. – DesignerAnalyst Sep 28 '17 at 8:14
  • 1
    @DesignerAnalyst Yes, I know, but it isn't neccessarily a good thing. – Steve Jones Sep 28 '17 at 9:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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