Prototype Library

Field Error

A presentational error line that sits under any input. Pass a resolved message string — it renders a danger-colored line (matching esa-form-field's error styling) or nothing when empty.

Inherited .astro import EsaFieldError from '@esa/ecology/esa-field-error.astro';

Preview

This field is required.

<EsaFieldError message="This field is required." />

Empty state

With no message the component renders nothing and collapses out of layout, so it never reserves a gap under the input.

(nothing rendered above) 
<EsaFieldError message="" />
<EsaFieldError message={null} />

With icon

Set icon for a small leading alert glyph.

Enter a valid email address.

<EsaFieldError message="Enter a valid email address." icon />

Under an input

It is presentational and composable — drop it beneath any control. Your validation layer decides the message.

Enter a valid email address.

<label for="email">Email</label>
<input id="email" type="email" value="not-an-email"
       aria-invalid="true" aria-describedby="email-error" />
<EsaFieldError id="email-error" message="Enter a valid email address." icon />

API

PropTypeDefaultDescription
message string | null '' Resolved error message. Renders nothing when null or empty.
icon boolean true Show the leading alert icon. On by default — without it, an error line and a help line are the same element in the same slot differing only by colour, which is SC 1.4.1.
id string — The element id, so a control's aria-describedby can point at this message. Without one the association this component exists for cannot be written.

Accessibility

  • This does not announce itself. It is an .astro component rendered at build time, and it renders nothing at all when message is empty — so there is no element in the DOM for a live region to update. A live region has to already exist, and be empty, before the text arrives; one created together with its content is routinely not announced. This page previously claimed otherwise.
  • Its scope is therefore server-rendered errors already present on page load — the message a form comes back with after a failed round trip. For an error that appears during a session, use the control's own error-text: those keep a persistent empty message node exactly so the region can fire, and expose live-error to opt into announcing it.
  • Purely presentational — it does not own the input's aria-invalid or aria-describedby. Give it an id and point the control at it, as the example above does.
  • The leading icon is decorative (aria-hidden) and the text carries the meaning — but the icon is doing real work for sighted users, since colour alone cannot distinguish an error line from a hint (SC 1.4.1). Prefer icon on.