Forms and errors

How users experience guidance


Required fields

Inline validation

Form submission validation

As the user focuses on other fields, each has its error message shown only on focus.

Designing easy-to-complete forms

Add help when necessary

Match visuals and requirements

Make selection clearer

Write helpful error messages

Name is required
Flight not found. Try entering again.
You didn’t enter your name
We’re very sorry but we couldn’t find that flight. Please try to enter the number again.
Email not in the proper format
Password must contain at least one number
Your email is too fancy for words
Your secrets are safe with us as long as you give us a number
Expiration must be in the future
Improper format for ID number
The date when your passport expires must take place at some point in the future
The data you entered for your ID number contains some characters that shouldn’t be there

Affected components

  • Checkbox: errors only highlight the box to be checked if it’s not selected.
  • ChoiceGroup: error messages appear below the group.

Design decisions

Why a tooltip?

  • Longer messages needed to be shortened as otherwise they would break the form grid layout and the fields wouldn’t be aligned.
  • Shorter form fields (like Day or Year) didn’t have enough space below the field to show more than a few letters.

Tooltip positioning

Color and borders