ErrorSummary
ErrorSummary shows a summary of user-triggered errors and should be used to give an overview of issues that needs to be addressed by the user in order to proceed.
Code examples
<ErrorSummary heading="Correct the following errors to proceed"> <ErrorSummaryItem href="#email-field"> E-mail field is required </ErrorSummaryItem> <ErrorSummaryItem href="#phonenumber-field"> Phonenumber field is required </ErrorSummaryItem> </ErrorSummary>
Guidelines
The ErrorSummary should be used to display an overview of errors that are user-triggered. This can for example be errors that appear in a form if the fields have certain rules that must be followed for them to be valid.
To show a system-error, please use Alerts.
Focus
Move the focus to the ErrorSummary-component each time the user tries to proceed while there are still errors present. When the component receives focus the screen will scroll to the component so it becomes visible, and voiceover will read out the content.
Placement
We recommend that an ErrorSummary is placed close to what triggers it to be shown. For example, if a Submit-button triggers the ErrorSummary to be shown, we recommend placing the ErrorSummary either over or below the button.
Content
An ErrorSummary should:
- Have a heading that clearly states that errors must be corrected before the user can proceed.
- Contain all errors that hinders the user to proceed
- Have items that directly link the user to the fields where errors are present
- Get updated continuously to show only the errors that are still present
Code
<ErrorSummary />
import { ErrorSummary } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | ErrorSummaryItem's | |
heading | string |
<ErrorSummaryItem />
import { ErrorSummaryItem } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
href | string | id of a form-field that has an error |