ErrorSummary

Alpha

An accessible error summary that lists form validation errors with links to the corresponding fields. Implements the GOV.UK error summary pattern.

Import

import { ErrorSummary } from "@compa11y/react";

Usage

Example.tsx

import { ErrorSummary, Input, Button } from "@compa11y/react";

function FormWithErrors() {
  const errors = [
    { id: "name-error", message: "Enter your full name", field: "name" },
    { id: "email-error", message: "Enter a valid email address", field: "email" },
  ];

  return (
    <form>
      <ErrorSummary errors={errors} heading="Please fix the following errors" />

      <Input id="name" label="Full name" error="Enter your full name" />
      <Input id="email" label="Email" type="email" error="Enter a valid email address" />
      <Button type="submit">Submit</Button>
    </form>
  );
}

Features

role='alert' with aria-live='assertive' for immediate screen reader announcement
Auto-focuses the summary on mount for keyboard users
Clicking an error jumps focus to the corresponding field
Heading with configurable text
Semantic ordered list of error links

Props

ErrorSummary component props
Prop	Type	Default	Description
`errors`*	`{ id: string; message: string; field?: string }[]`	-	List of errors with optional field reference
`heading`	`string`	`'There is a problem'`	Summary heading text
`onErrorClick`	`(error) => void`	-	Called when an error link is clicked

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for ErrorSummary
Key	Action
`Tab`	Moves between error links
`Enter`	Jumps focus to the referenced form field