ErrorSummary
The summary of all of a form’s errors, at the top, each one leading to the field that needs fixing.
On this page
Playground
Fix 1 field to save
Errors
Background
<div class="feitio-error-summary" role="alert" tabindex="-1"><h3><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Fix 1 field to save</h3><ul><li><a href="#playground">Write a name for the reminder</a></li></ul></div>When to use
- Whenever a form comes back with an error, even a single one.
When not to use
- For a problem that is not about a field (could not save): an error Notice.
Examples
Fix 2 fields to save
Name
Time
On the page
At the top of the content, before the form: the first thing seen and heard.
Show code
<div class="feitio-error-summary" role="alert" tabindex="-1">
<h2>…Corrija 2 campos para salvar</h2>
<ul>
<li><a href="#nome">Escreva um nome para o agendamento</a></li>
<li><a href="#hora">Use um horário entre 00:00 e 23:59</a></li>
</ul>
</div>Anatomy
Fix 2 fields
- Box: the error background and the wine line around it.
- Title: how many fields and what to do.
- List: one link per error, with the field’s sentence.
Do and don’t
Don’t
Oops! The form has errors.
Without the list, the person hunts for the errors, and "Oops" apologizes without helping.
Writing
- Title: "Fix N fields to save", with the button’s verb.
- Items: the same sentence as each ErrorMessage, in field order.
Where it goes
- At the top of the content, after the trail (Breadcrumbs) and before the page heading.
- The tab title gets "Error: " in front, so whoever comes back to the tab knows something is missing.
Accessibility
role="alert": screen readers announce the summary as soon as the page loads, and focus goes straight to it.- Each link goes to its field (the first one, in a group), which takes focus.
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-error-summary" | required | The error background and the wine line. |
role="alert" | always | Announced when it appears. |
tabindex="-1" | always | So focus can go to it. |
a href | "#id-do-campo" | Each error leads to its field. |