For text label positioning, we typically use three options: top, left, and right-aligned.

The ideal style for us will be determined by the primary goals and sizes of the form, component library, and platform for which we are designing.

Top-aligned Text fields

The quickest completion time and overall best choice for the majority of situations. They work well on mobile since they don’t take up a lot of horizontal space.

Advantage : Capture all inputs and labels in single eye and fastest completion of forms.

Disadvantage : Use more space of the page as vertical.

Left-aligned Text fields

When the data requested is unfamiliar to people, this is a suitable option.

Advantage : Labels that are easily scalable and make excellent use of vertical space

Disadvantage : Excessive and variable distances between labels and related inputs increase completion of forms.

Right-aligned Text fields

Advantage : The amount of eye movements is limited, resulting in a quick completion time; because the text field labels and input are near together.

Disadvantage : It is more difficult to fast scan the form and understand what information is necessary.