ErrorSummary
StableAccessible
The error summary is notification-like element which lists all errors (and their descriptions) found in a form or other inputs and provides anchor links to each erroneous input for easy access.
Usage
Example
Error summary
- Error 1: Please enter your first name
- Error 2: Please enter your last name
- Error 3: Please enter a valid email address
Principles
- The error summary is a notification-like element which lists all errors (and their descriptions) found in a form or an input and provides anchor links to each erroneous input for easy access.
- Add a label for the error summary that describes the errors.
- You can also add autofocus attribute to jump to the summary when it appears.
- A more detailed description of using the component when evaluating forms can be found in the patterns section.
Variations
Large
There are two variations, the default and the large.
Default error summary
- Error 1: Please enter your first name
- Error 2: Please enter your last name
- Error 3: Please enter a valid email address
Large error summary
- Error 1: Please enter your first name
- Error 2: Please enter your last name
- Error 3: Please enter a valid email address