Introduction
Foundations
Components
Patterns
Directives
Pipes
Motion
Brand
Foundations
Accessibility
Colors
Copywriting
Error handling
Grid
Illustrations
Layouts
Spacing
Typography
Forms
Forms
Forms are used to get and collect input from users. They usually consist of form elements like input fields, radio boxes, checkboxes, etc.
General
Optional fields - include "(Optional)" texts in the label for fields that are not required.
Required fields
Required fields do not need asterisks within the label.
Do not validate if the user is still typing.
Form validations
Display clearly that there is an error.
Highlight the fields that have an error.
Provide information what needs to be done.
Validate when a user leaves the field.
Don't use tooltips for error message
Group related fields or labels
Consider translations for placeholders and labels. The length of the text can change quite significantly.
Placeholders
Placeholders shouldn't be truncated.
Placeholders should be a specific example of the intended input you expect from the user, not a repeat of the input label.
Fields should always have placeholders.
See
guidelines
for writing copies.
Writing Error Messages
Error messages should be easy to understand.
Any incorrect fields should be easy to locate
Users shouldn't have to memorize the instructions for fixing the error.
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.