# ErrorSummary

The summary of all of a form’s errors, at the top, each one leading to the field that needs fixing.

## Playground

```html
<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

### On the page

At the top of the content, before the form: the first thing seen and heard.

Show code

```html
<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

1.  **Box:** the error background and the wine line around it.
2.  **Title:** how many fields and what to do.
3.  **List:** one link per error, with the field’s sentence.

## Do and don’t

Do

### Fix 1 field to save

-   [Pick a time zone](#exemplos)

Even with a single error, the summary shows.

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.