Error Summary
Error Summary Notifications are used to summarise form errors.
Usage
Error Summary Notifications summarise all the errors on a form in a single notification. The ids of the form elements on web are used to focus them when each message is clicked, make sure the correct ones are passed.
Content
- Always use the same wording as the error messages which appear next to the input
- Unless those messages contain links - do not include those as these messages get wrapped in a link.
- Always use plain language
- Errors should always be clear and concise
- Never use pleasantries like 'Please'.
Accessibility
- Always place the component at the top of the page.
- If your page includes breadcrumbs or a back link, place it below these, but above the h1
- Always have the component on the page, and pass any errors to it when forms are submitted.
- The component will be hidden until it receives errors.
- Ensure that the keyboard focus moves to the error summary
- This should happen automatically.
- Ensure hat the errors that appear in the summary link to their respective fields
- This should happen automatically
Dynamic Example
The error summary notification component should be on the page but hidden until it receives errors. Passing errors to the error summary notification when submitting a form will display the errors and focus the component.
Properties
| Name | Values | Default |
|---|---|---|
id | String | |
errors (required) | {id: string; message: ReactNode;}[] | |
ref | Ref<HTMLElement> | |
title | ReactNode | Oops, there's a problem... |
noMarginRemove the default margin that appears at bottom of the notification when it is displayed | Boolean | |
...Spread to outer most div - the 'focus wrapper' | JSX.IntrinsicElements["div"] |