Input field
Interactive text field for user to enter their data into
⭐️ Ensure text size is readable on all devices
Label
Stating what information the user is meant to provide
⭐️ Avoid all caps for text labels to improve readability
Placeholder text
Text inside the input field acting as an example of what you want the user to enter
⭐️ Text colour must be notably lighter than default text, so users don't assume its filled in
⭐️ Providing examples lets users understand how you would like them to enter the information
Data format
Set text fields to allow the relevant text values e.g. numeric only for phone number
⭐️ Hint at preferred data format with placeholder text
Illustration or icon
A visual cue can help break up a long list of text fields
Helper text
Elaborate on the title of the text field incase a user struggles to know what to enter
Default
Text field has not interaction and is visible
Hover
Mouse pointer is on text field
Active
Text field clicked on, text entered
Focused
Text field selected to receive input
Disabled
Text field cannot be changed or affected
Error
Problem identified with data input
