# ErrorMessage

El mensaje que indica qué corregir en un campo, justo debajo.

## Playground

```html
<div class="feitio-field"><label class="feitio-label" for="pg-em">Hora</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>Usa una hora entre 00:00 y 23:59</span></div>
```

## Cuándo usarlo

-   Cuando un campo regresa con un problema: uno por campo, siempre con ErrorSummary arriba.

## Cuándo no usarlo

-   **Para un problema de toda la página** (la conexión se ha perdido): una error Notice.
-   **Mientras la persona sigue escribiendo:** no marque un error antes de que envíe.

## Ejemplos

### A continuación del campo

Vino, en negrita, con el icono, `space-1` debajo del control.

Mostrar código

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

## Hacer y no hacer

Do

Write the email as name@example.com

Dice exactamente qué hacer para hacerlo bien.

Don’t

Invalid email!

"Inválido" no dice qué está mal y el signo de exclamación grita.

## Escritura

-   Diga cómo hacerlo bien, no solo que está mal.
-   La misma frase en el campo y en el resumen arriba.
-   Sin "por favor", sin disculpa, sin signo de exclamación.

## Accesibilidad

-   Vinculado al campo a través de `aria-describedby`, y el campo obtiene `aria-invalid="true"`.
-   Color, icon y palabra: el error lee sin distinguir la uva.

## Atributos

Atributo

Valores

Para qué sirve

`class="feitio-error-message"`

obligatorio

Uva, en negrita, con el icono.

`id`

texto

Así el campo puede apuntar a él con `aria-describedby`.
