ErrorSummary · LoamUI

Import

import { ErrorSummary, Field, Input } from "@loamui/core";

Usage

Every example has a CSStab. That’s the real, complete stylesheet for the component: plain, static CSS, with nothing running in the browser.

After a failed submit

Submit the empty form: the summary appears, takes keyboard focus so the problem is announced, and its link moves focus into the field.

Guidance

When to use it

At the top of a form after a failed submit, listing every field error in the order the fields appear.
Whenever there is more than one field on the form: with a single field, the field's own error carries the message alone.

When not to

For a single global failure that has no field to link to: use an Alert.
While the user is still typing: the summary responds to a submit attempt, not to keystrokes.

Accessibility

The summary takes keyboard focus when it appears (tabIndex -1 + focus), so assistive technology announces the group, labelled by its title, as soon as the submit fails.
The Title renders "There is a problem" by default and labels the region via aria-labelledby.
Items are real links: right-click, open-in-new-tab and AT link lists all behave; activation focuses the field so the correction can start immediately.
Keep the user's failed input in the fields: never clear values when showing errors.

How it works

Same words in both places

Each item repeats its field's error message exactly, so the message reads identically in the summary, beside the field, and out of context. Write both from the Field page's error-message doctrine.

Links land the user in the field

Fragment navigation scrolls to the field but does not focus it, so each item also moves focus into the target: the user activates a link and starts typing the correction.

Order follows the form

List errors in the order the fields appear on the page, so fixing them top to bottom walks the form once.

Placement and the page title

Render the summary at the top of the main content, above the page heading, so it is the first thing encountered after the failed submit. Prefix the document title with "Error: " as well; a reloaded or re-announced tab then states the failure before anything else.

Multi-field controls

A control made of several fields, like DateInput, takes one item per error, linked to the first field that error applies to: give the DateInput.Root id="date-of-birth" and point the item at #date-of-birth-day, or straight at #date-of-birth-year when the error names the year.

Parts

`ErrorSummary.Root`

The focusable group; native <div> props are forwarded.

Prop	Type	Default	Description
`autoFocus`	`boolean`	`true`	Moves keyboard focus to the summary when it mounts.

`ErrorSummary.Title`

An <h2> labelling the region; children default to "There is a problem". Native heading props are forwarded.

`ErrorSummary.List`

The list of errors; native <ul> props are forwarded.

`ErrorSummary.Item`

One error: a real link to the field's fragment that focuses the target on activation. Native <li> props are forwarded.

Prop	Type	Default	Description
`render`	`RenderProp`	—	Substitute the built-in <a>, e.g. a router link; the wiring (href, focus handling) merges onto it.
`href`	`string`	—	Fragment link to the field the error belongs to (required).