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.