Input Field
Components
An input field is an interactive area where users can enter and edit text or data. It provides a clear visual container for user input, often accompanied by labels and validation feedback, making it essential for forms and data collection interfaces.
Checklist
Reset
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 or hint
Illustration or icon
A visual cue can help break up a long list of text fields
Hint
Elaborate on the title of the text field incase a user struggles to know what to enter
