cft

When we design a Text field Which one is most suited to the form ?

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.


user

Chavika Kodithuwakku

2 years ago | 1 min read

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

Top-aligned Text fields
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

Left-aligned Text fields
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

Right-aligned Text fields
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.

Upvote


user
Created by

Chavika Kodithuwakku

Mobile and Web UI (User Interface) Designer | UX (User Experience) Designer | Mobile application Developer (iOS & android) | Freelancer πŸ“–οΈ University of Westminster - London πŸ‘©β€πŸŽ“2022 (undergraduate) πŸ‘©β€πŸ’» Android and iOS developer πŸ‘©β€πŸ’» UI / UX designer


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles