# ErrorMessage

The message saying what to fix in a field, right below it.

## Playground

```html
<div class="feitio-field"><label class="feitio-label" for="pg-em">Time</label><input class="feitio-input" aria-invalid="true" aria-describedby="pg-em-error" data-width="10" id="pg-em" value="25:00"><span class="feitio-error-message" id="pg-em-error"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Use a time between 00:00 and 23:59</span></div>
```

## When to use

-   When a field comes back with a problem: one per field, always with the ErrorSummary at the top.

## When not to use

-   **For a whole-page problem** (the connection dropped): an error Notice.
-   **While the person is still typing:** do not flag an error before they submit.

## Examples

### Below the field

Wine, bold, with the icon, `space-1` below the control.

Show code

```html
<div class="feitio-field">
  …
  <span class="feitio-error-message" id="hora-erro">
    <svg class="feitio-icon" aria-hidden="true">…</svg>Use um horário entre 00:00 e 23:59
  </span>
</div>
```

## Do and don’t

Do

Write the email as name@example.com

Says exactly what to do to get it right.

Don’t

Invalid email!

"Invalid" does not say what is wrong, and the exclamation mark shouts.

## Writing

-   Say how to get it right, not just that it is wrong.
-   The same sentence in the field and in the summary at the top.
-   No "please", no apology, no exclamation mark.

## Accessibility

-   Tied to the field through `aria-describedby`, and the field gets `aria-invalid="true"`.
-   Color, icon and word: the error reads without telling the wine apart.

## Attributes

Attribute

Values

What for

`class="feitio-error-message"`

required

Wine, bold, with the icon.

`id`

text

So the field can point to it with `aria-describedby`.