I have a screen where the button will only enable when either one of the field (Field A or Field B) is entered. However, I'm stuck when designing for the combo field (Field B - in screenshot below) where i have to do a check that both of the input fields in Field B have to be entered for it to be valid. How should I design it in a way that it is clear enough that they have to filled up both input field in order to proceed on?

enter image description here

2 Answers 2


I think you should view the combo field as three separate elements.


download bmml source – Wireframes created with Balsamiq Mockups

Keeping them within a visual container, like in your example, will show their relationship.

  • 1
    Also keeping the label on top of visual container. fair enough.
    – prazor9
    Mar 13, 2017 at 15:22

There are some suggestions you can try:

  • Change the border of those fields to red (or mark them in other way), and comment below that fields with red border are required.
  • It seems like if they are trying to submit the form without entering the required data to those fields, the submission will fail. You can inform them that these fields are required by changing their border to red only in the end, when the submission is failing, like GMAIL does.
  • You can circle both the required fields with a border and give the entire border a title.

In my opinion, I prefer the first two options, but the last one seems OK, too.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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