I'm wondering if there is an official name for this style of the form:

enter image description here

Example uses: https://www.tumblr.com/login OR https://www.tumblr.com/register where the input boxes are packed together with a line in between.

  • 1
    The number of times I've had to click outside the box to see what field I am typing in. Hate this 'design'.
    – rk.
    Aug 1 '13 at 2:01
  • It seems to be a fancy fieldset?
    – TotemFlare
    Aug 6 '13 at 22:25
  • Forms without any space between fields that look like your example? I think the name is bad UX experience. Jan 25 '19 at 5:16

I think it mimics iOS UI style (at least I don't remember such a component before iOS, please correct me if you have some other information):

enter image description here source

It is UITableView with style Grouped.

Or you can call it "text field group".


They could be referred to as Grouped Form Fields.

It is partly a design trend. I think most people would argue that while it may be visually pleasing, it is not great from a usability standpoint. You could closely group fields without needing to combine them in that way. For example, someone may not realize that they need to tap again to type in a second part of the field.

Grouped Form Fields

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.