Horizontal & inline forms

01 Horizontal form saves space on the page

Horizontal forms help save space on the page and make the form as compact in height as possible. This, in some cases, increases readability and filling speed.

On mobile screens, it's better to turn the horizontal form into a vertical one and make labels above the input fields. The horizontal space is significantly limited on mobile screens, and a horizontal form would look weird.

Horizontal and vertical forms have their advantages. Each of them, if made, the rule is well readable and convenient. It's hard to say that one works better and the other worse. So it all depends on your needs and your solution.

But horizontal forms are technically more challenging to build. They require more approaches and more care in implementation to keep them usable and readable.

02 Align labels in a horizontal form

It is better to align the labels to the left edge in the horizontal form. This makes them easier to read, allowing you to glide along the flat left edge with your peripheral vision and scan the label names.

The simple way to better structure the horizontal form is using a grid. It gives them predictable columns and label width.

03 Vertical alignment of labels

The alignment of input fields and their labels has its own rules in horizontal form. Different types of fields have different guides.

Align all labels to the top edge of the input fields if they have a hint. However, if there is no hint, the alignment depends on the field type.

04 Lines of force

Incredibly, many places I come across horizontal forms with different input fields on different vertical lines. Such forms look like real chaos. They don't read very well, either.

Just use only two vertical lines of force to create a structure. The first is the line of labels. The second is the line of inputs and buttons. That's it.

It's so simple and it works so well. You don't have to invent anything, you don't have to try to move the button to the left. Just two lines.

05 Inline forms

Inline forms are usually used to enter additional data in complex forms or filter and search for results. Inline forms are often questioned because they are designed to be too minimalistic and save as much horizontal space as possible, sacrificing usability and readability.

A few tricks make an inline form more readable and usable. First, the input fields should have labels. This step will already make it much better. Second, all fields and controls should be consistent in the form line. This will make it neat and logical. So checkboxes and radios are better placed on a line below the form.

A simple rule of thumb: the row of an inline form should contain only controls that are the same in appearance and height, such as buttons, input fields, and select. All other controls: checkboxes, radios, sliders, toggles should be placed in the line below the form.