In our system, we have long forms used for data entry. Our entry fields, checkbox controls, and combo boxes are always listed down the left side of the screen in one column.

Our persona deals with these long forms and data entry all day; therefore, they are used to seeing one column of data entry.

In the example below, our persona wants to run a report for any check dates that fall between 7/1/16 and 6/30/17.

Should date range fields be vertical with two labels or horizontal with one label?

A or B?

A B Image

  • What is the context around the date? Are there fields before and after it? Is this a web/desktop/mobile app?
    – Jonathan
    Aug 25, 2017 at 19:03
  • @Jonathan There will be fields (other ranges)before and after the dates. This is for a responsive web app. Aug 25, 2017 at 19:19

1 Answer 1


Putting the fields side by sides with the labels above the fields is a more standard approach than A or B (see the Material Guidelines).

You can see this on all sorts of sites that use date ranges, for example, travel sites. Something like this may work for you. If there are no other dates, then these labels should be sufficient (you could test with users and see if they understand).

Additionally, the NNGroup has a good read on date inputs.


download bmml source – Wireframes created with Balsamiq Mockups

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.