Error handling UX design guide

This guide will how you how to display errors in various situations for WorksafeBC Apps

In-field error handling

When the error happens at the input-field level, use this style

Please provide a valid ID
View reference

Errors at the component level

When the error happens at the component level, use these styles

General

There is an error

This is what is happening and this is how you can fix it

Catch all error block

Please enter your 10-digit phone number.
Please enter your email address.
Please enter your email address in the format name@email.com.

Stacked errors

Please enter your email address in the format name@email.com.
Please enter your 10-digit phone number.
Please enter your email address.
View reference

Errors at the page level

When the error happens at the page level, use this style

We were unable to process your request.

Please contact our Employer Service Centre and a representative will be able to assist you.


View reference