UI cheat sheet: text fields

Apart from buttons, text fields are probably one of the most used user inputs. When you sign in to Friendface, or order a Nicholas Cage pillow online, or send your banking details to your new online pen-pal, chances are, you will use a text field.

In later cheat sheets, we will look at pre-determined text fields (aka dropdowns) and how to style forms, but for now, we will be looking at ye old humble text fields and how we should style them.

So what’s in this cheat sheet:

1. Text field anatomy
2. Text field structure
3. Common text field styles
4. Icons
5. Text field states
6. Text field labelling & prompt text
7. Feedback
8. Autoformat
9. Touch targets
10. Accessibility checklist
11. Text field hall of fame
12. Closing thoughts

1. Text field anatomy

Text fields have multiple bits and pieces, some of which are only visible depending on what state it is in (default, active, inputted, etc). The below image breaks it all down. Bearing in mind that the style of the field may change, chances are that it will still have most of these elements.