I am working on small project(web page) where a user can have two options to get results. But only one can be used at a time. Being a noob with UI and stuff, I would like to know how to work on such scenarios.

To get user details(internal tool), a user can enter either email address or phone number. Only 1 among the two at a time. The details will then be populated down. It won't redirect anywhere and user can get details of user without reloading page or navigating elsewhere.

I was thinking of something like below. enter image description here How can I improve the same or any references you can share?

3 Answers 3


Is it necessary to have two fields knowing that each of the two options has different contents?

If the user inserts an @ they will have placed an email. On the contrary, if they type +numbers, a telephone.

enter image description here

Codepen demo

  • This one seems interesting, Also can you suggest something where both options are text like some alphabetical id and name?
    – Alan
    Jul 23 at 19:08
  • If you know some javascript for sure you will have no problem finding the solution by modifying the attached codepen script.
    – Danielillo
    Jul 23 at 19:14
  • Makes sense. Thanks for the demo with code.
    – Alan
    Jul 29 at 6:22

Perhaps use a radio button, letting the user know he has a choice of either or but not both, and an input that changes according to the users choice. if you have previous data to know which of the two will be used more, have that choice selected by default.

enter image description here

  • Why couldn't I think of this simple approach earlier? It's so simple!
    – Alan
    Jul 29 at 6:20

Similar to mayag's suggestion, we solved a related question as follows:

enter image description here

This went through multiple discussions and this version was the one where most agreed. This part is in a checkout process and this specific field is about tax identification. In brackets the first one says "(preferred)" and second one "(alternative)".

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.