Patterns · Forms
Lists a form’s errors after a failed submit, with a link to each field. useFormErrors wires the fields to their messages.
Submit empty to see the summary. A new map per submit moves focus to the summary; links jump to each field.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| errors | { id: string; message: string }[] | — | ✓ | One entry per invalid field; `id` is the field’s DOM id. Renders nothing when empty. |
| title | ReactNode | '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) | Record<string, string | null | undefined | false> | — | ✓ | Takes `{ fieldId: message }`. Falsy messages are skipped. |
| → errors | ErrorSummaryItem[] | — | — | 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. |
import { Error Summary } from '@nexub/patterns';