It's a common convention in web form design to mark required fields with an asterisk. Is there any way to denote that one of a pair of fields is required? In other words, a form like this:


download bmml source – Wireframes created with Balsamiq Mockups

Where either email or phone is required, but not necessarily both?

The best I can think of is simply text that says "you must enter one of these". Is that the only way to go?


Would it not be more appropriate to make the label describe that it is a contact field and ask the user to add one or more of the appropriate type? This makes the form also expandable to future forms of contact in the future (sms, or mailing address for example) or multiples of both phone and/or email.

In this screen we have pre-populated the first 2 sets of fields. The fields are marked as required If they choose "phone" the placeholder text could change to say phone instead.


download bmml source – Wireframes created with Balsamiq Mockups

Once they have started typing, or perhaps after they have typed a valid email address or phone, you could automatically add another set of fields of the next type that doesn't say required.


download bmml source

  • +1 I like this option. It gives the user an option on what type of contact information to provide but it's still obvious that it's required and eliminates confusion. There are no extra or empty fields hanging out on the form when the page loads either. – Jason Towne May 15 '12 at 23:23
  • 1
    +1. I proposed the same solution to a similar question (ux.stackexchange.com/questions/11527/…). Like you, I argued that web forms rarely offer either/or workflows, and that multi-type questions are a better design. – Jimmy Breck-McKye May 16 '12 at 0:58
  • 1
    I would not automatically add another except if you're keen on getting both information provided. Instead you could propose to have a secondary action (link?) to add the other info too. Apart from that +1 for the good proposal. – greenforest May 16 '12 at 12:31
  • I like this answer. I'm not sure it fit's my exact situation for obscure reasons not worth elaborating on... – jlarson May 17 '12 at 16:07
  • 1
    Kevin, I'm calling this the answer since it answers the question I asked. My question may not have been clear enough because it doesn't actually solve my problem, but that's not your fault, it's mine for being unclear! – jlarson May 18 '12 at 15:32

Start by just having normal 'required' flair on both the fields. Perhaps a colored background. Perhaps colored asterisks.


download bmml source – Wireframes created with Balsamiq Mockups

When the fields get focus, remove the standard flair, and replace it with a specific explanation that only one is required. In my example, I keep the required flair on the active field to reinforce the text that at least one is still required.


download bmml source

To avoid clutter, the brace and explanation only need to appear when those fields have focus, and can replace general 'Required' field flair. While it does not remove the need for 'One of these fields is required', it clutters the form only when strictly necessary, and only temporarily.

When the user finishes with one or both of the fields, the flair adapts to whichever fields are currently filled in, so as not to confuse the user thinking they have to return to fill in an empty field.


download bmml source

I have never needed to require a field in this manner, so this has not been tested by me. I believe it provides good usability for a unique workflow, but I could well be wrong. Always test with real users before using a completely new interface design.


EMail [..............] -- or -- Phone [.................] (* required)

how about this?


I think it's best to go with radio buttons grouped in one section. Required sign * will be denoted outside the box, giving indication that this section is required. As for the radio buttons, it will force user to choose either one of the required fields.

enter image description here

  • I think the radio buttons are overcomplicating this - your implementation should be able to pick up that one of the fields has been completed and disable the other. – Peter May 18 '12 at 12:14

If I can enter both, wich field will be used as identity? (if you use this data as login)

there are two extra ways:

Extra field
note, how validation asterisk jumping from email to phone.

Use as identity: (v) Email
                 ( ) Phone

Email * : [______________]
Phone   : [______________]

Use as identity: ( ) Email
                 (v) Phone

Email   : [______________]
Phone * : [______________]

Ask more preferrable option first

not a good one since there is no way to enter both email and phone

Email * [________________]
        [I don't have email adress] -- link to switch form to "Phone mode"

if link clicked:

Email   : [________________] --- become disabled

Phone * : [______________] [cancel] -- or something like that :)

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