Error messages appear after someone has taken an action and alert the person of an error that has occured in their action. For example, if someone tries to submit a form without filling out a required field, an error message would alert them of the fact they forgot to complete a field and what field they forgot to complete.
When to use this component
- Error messages should be used for form validation.
- For service status messages such as errors and warnings.
When not to use this component
- To confirm the deletion or cancelation of data - instead, use a modal dialogue message to confirm the user action.
Accessibility and Usability
- Ensure there is an explicit indication that something has gone wrong.
- Always follow plain language guidelines when writing custom error messages - the error message must be easy for all users to understand.
- Visual design should include both an error icon and an error color to convey meaning.
- The error message must be coded to receive focus by assistive technology when triggered.