Input
Usage
Input fields allow users to type and submit text. They are commonly seen in forms.
Anatomy
1. Label text: A clear label for the input field (use
2. Prefix label (optional): An icon, text or symbol that can be used as a prefix label.
3. Error message (situational): A short and actionable message below the error field to help the user fix the error.
4. Placeholder text: Indicates an example of text the user can enter.
5. Container: Holds the input elements.
6. Suffix icon (optional): An icon, text or symbol that can be used as a trailing label.
Usage
Format
Avoid all caps
Stick to sentence case when creating labels. Avoid writing in all caps since it can be hard to read and scan.
Do
Don't
Add placeholders to indicate input format
Use a placeholder text as a guide or an example to show what the user needs to fill in.
Do
Don't
Things to consider
Write clear and concise labels
Aim to provide a clear label for each input field. Users should immediately know what input to enter based on the labels given. With each label and placeholder text, strive to write a succinct description (one or two words) so users are able to quickly scan over it. Avoid using a placeholder as a label.
Do
Don't
Assign each field a proper size
Input fields should be sized accordingly to their expected input. The field should be large enough to fit the maximum possible field value. Consider translations for labels and placeholders.
Do
Don't
Fields that logically go together should be inline in desktop
Stacking related fields such as names, addresses, and payment info may cause unnecessary friction, take up too much space, and can break a user's flow. However fields should be placed in a single column for mobile screens or in special cases like the sign up or log-in flow.
Do
Don't
Group related fields
Place related fields together closely. Grouping input fields manages user expectations and helps the them scan over the form easily.
Do
Don't
