Skip to content
nexubDesign System
v2.4.0

Patterns · Forms

Error Summary

Since v1.7.0

Lists a form’s errors after a failed submit, with a link to each field. useFormErrors wires the fields to their messages.

import { ErrorSummary } from '@nexub/patterns';

Usage

Use it for

  • Forms validated on submit, especially long ones where some errors are off screen.

  • Alongside inline messages, never instead of them.

Use something else for

  • Live validation while typing: pass a new array per submit, not per keystroke, or the summary steals focus.

  • A single field: the inline message is enough.

Examples

Validate on submit

Submit empty to see the summary. A new map per submit moves focus to the summary; links jump to each field.

Props

Props
PropTypeDefaultDescription
errorsrequired{ id: string; message: string }[]—One entry per invalid field; id is the field’s DOM id. Renders nothing when empty.
titleReactNode'There is a problem'Heading; it also labels the summary.
onFocusField(id: string) => void—Called after a link moves focus to its field.
useFormErrors(map)requiredRecord<string, string | null | undefined | false>—Takes { fieldId: message }. Falsy messages are skipped.
→ errorsErrorSummaryItem[]—The list for ErrorSummary. Stable for the same map object.
→ fieldProps(id)function—Spread on the input: id, plus aria-invalid and aria-describedby="${id}-error" when it has an error.
→ errorProps(id)function—Spread on the inline message: id="${id}-error", the same id FormField.Error uses.

On iOS & Android