Table of Contents

outline	true
style	square

Usage & Behaviour

A validation field consists of:

Color frame with a small icon on the top-right corner. This marks the validation type.
A validation Tooltip message, which appears on hover over the validated field.
A descriptive message next to the action buttons:
- Error messages have a higher priority than warning messages. When errors are fixed, the warning validation should then be shown.
- Where there is limited space or a short form, no descriptive message will appear.

Examples:

Components	Error	Warning
Text Field
Text Area
Drop-down Menu
Combo Box
Numeric Stepper
Date Picker
Time Picker
Search Field	NA
Switches	NA
Slider	NA
Single check box	NA
Check box group
Grid table cell
Tabs
Call To Action with short text	on Error, the button is disabled
Call To Action with mixed errors Error takes priority
Call to action with long text. Pop-up size might need to expand in height

...

2 options for the content of the error message:
- Generic
  The content of the message is written in advance and there is no need to refer to the specific text that the user typed, such as This is not a valid zip code.
- Input based (Preferred where applicable)
  The content of the message can dynamically change based on the user input. Use it to clarify where the error is coming from. For example:
  - Rather than Invalid input → use Zip codes cannot contain the special character "%".
  - Rather than You cannot book this flight. Please select another destination or date. → Use Direct flights to Dublin are only available in August. Please select another destination or date.
For complicated fields, using an example in the tooltip message can help.
Try to avoid negative words. For example rather than
- Rather than Password does not meet requirements or Invalid Password → use Password must contain 8 alphanumeric characters.

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

...

Zeplin link	Screen thumbnail
https://app.zeplin.io/project/5970b366bee38cf87b2de932/screen/5baca0fa7044c49e813fe220
https://app.zeplin.io/project/5970b366bee38cf87b2de932/screen/5baca11066034667cc35f576

...