01Horizontal 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.

Long vertical form.
Compact horizontal form

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.

02Align the labels in a horizontal form

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

Labels aligned on the right edge.
Labels aligned on the left edge

03Using a grid for horizontal form

Using a grid helps to better structure the horizontal form and give it predictable columns.

The grid defines the structure.

04Vertical alignment of labels and inputs

In the horizontal form, label alignment is not the same for different fields. For a text and select field, the label should be aligned to the centerline of the field. For radios, checkboxes, and textarea the label should be aligned to the top line of the control.

Align labels to the input fields.

All labels are aligned to the top edge of the input fields if they have hint. However, if there is no hint, the alignment remains depending on the type of field.

All labels with hint are aligned to the top edge of the input fields

05Lines of force

The rule for positioning fields in a horizontal form is very simple: they must all be aligned on a single line. This applies not only to text inputs but also to radios & checkboxes.

The weird position of inputs and button in the horizontal form.
All inputs and button have the same vertical line.

There are only two vertical lines in the horizontal form. The first is the line of labels. The second is the line of inputs and buttons.

Lines of force in horizontal form