I'm creating a web site that requires users to log in using either their email address OR mobile number.

What is the best way from a UX point of view to indicate that only one of the fields should be filled in. I'm thinking either an option to select which one the user will enter, having two text boxes and disabling one when text is in the other, or having one text box with some fancy regexing to work out if what is entered is an email or password. However, I'm not a UX designer and I'm open to any better ideas.


We ran into the exact same problem in the previous project. As it turns out, using only one textbox and label it "Email/Phone" would do fine. Regex is used both on the client side (javascript validation) and server side to check whether user's input is email or phone.

Here is link to my login mockup.

one field for email or phone number

  • Could you add a mock up of your solution? – edgarator Nov 23 '12 at 2:58
  • There is a downside to the single field option though. You cannot supply hints on the input type that would supply content-specific data entry for numbers vs email addresses (e.g. the different iPhone keyboards you get). – adrianh Nov 24 '12 at 11:23

Agree with user21630

The same idea comes to my mind that just use one text box with grayed out hints said "email/phone".

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.