Text fields & Forms design — UI components series | by Taras Bakusevych | UX Collective

More about this content:

In this step you'll learn about Text Fields & Forms design and how to design them to make them user friendly. Text field anatomy includes key elements such as container, input text, label text, placeholder text, helper or validation text, leading icon and trailing icon. Text field types are usually based on basic text fields modified to better handle specific types of information. It is important to use appropriate input type for data you collecting and to change the appearance of text fields based on state and user interactions. Choosing the best text field style depends on key goals and sizes of the form. Length of text field should be proportional to the expected user input and using placeholders are not replacements for labels. It is also important to reduce the number of fields, use conditional logic, group related fields, avoid using multiple column layouts, break complex forms into a few simple steps, show the appropriate keyboard type and stop ridiculous password creation designs.