Skip to content
rdloom

Error Summary

The list of problems at the top of a Form after a failed submit. Focus moves to it and each item takes the person to its field. It shows nothing until a submit has failed and goes away when everything is fixed.

Feedbackv0.1.0experimentalWCAG 2.2 AAView spec
 
import { ErrorSummary, Form, FormSubmitButton, FormTextField } from "@rdloom/react";

export default function ErrorSummaryBasicExample() {
  return (
    <Form className="w-96" defaultValues={{ company: "", vat: "" }} onSubmit={() => {}}>
      <ErrorSummary title="Check these details" />
      <FormTextField name="company" label="Company" isRequired />
      <FormTextField
        name="vat"
        label="VAT number"
        validate={(value) => (value && !/^[A-Z]{2}\d{8,12}$/.test(value) ? "Use two letters followed by the digits, like DE123456789." : null)}
      />
      <FormSubmitButton>Continue</FormSubmitButton>
    </Form>
  );
}

Installation

npx rdloom add error-summary

Copies the source into src/components/rdloom. Edit it freely: rdloom upgrade merges later versions into your changes.

Use another registry client
npx shadcn@latest add https://rdloom.vimalbhatt.com/r/error-summary.json

Works, but without upgrade tracking.

Usage

import { ErrorSummary, Form, FormSubmitButton, FormTextField } from "@rdloom/react";

<Form className="w-96" defaultValues={{ company: "", vat: "" }} onSubmit={() => {}}>
  <ErrorSummary title="Check these details" />
  <FormTextField name="company" label="Company" isRequired />
  <FormTextField
    name="vat"
    label="VAT number"
    validate={(value) => (value && !/^[A-Z]{2}\d{8,12}$/.test(value) ? "Use two letters followed by the digits, like DE123456789." : null)}
  />
  <FormSubmitButton>Continue</FormSubmitButton>
</Form>

API Reference

Defined by the spec. Components also accept the props of the React Aria component they wrap.

PropTypeDefault
title

The heading read first when focus arrives.

string"There is a problem"

Accessibility

Role region, WCAG 2.2 AA. Tested with axe and keyboard tests; screen reader checks are in the audit checklist.

Keyboard

  • Focus lands on the summary after a failed submit
  • Tab moves through the links; Enter moves focus to that field

Screen readers announce

  • On focus: the heading, then each problem as a link, for example "Email: Enter a valid address"
  • Activating a link moves focus to the field, which reads its label and error

What your code must do

  • The summary is named by its heading (aria-labelledby)
  • Each item names its field and says what is wrong, so it makes sense out of context
  • Moving focus to the summary reads it once; it is not also an alert, so nothing is spoken twice
  • Goes with the field errors, never instead of them: each field still shows its own message

Guidelines

Use it when

  • Forms with more than a couple of fields, where finding the errors would otherwise mean scrolling

Avoid it when

  • A one-field form: the field's own error is enough

Don't

  • Placing it at the bottom: put it above the fields, where focus lands
  • Listing messages without naming the field

Design tokens

The semantic tokens this component uses. Change them once and every component follows; see Design tokens.

  • --rd-color-text-default
  • --rd-color-feedback-danger
  • --rd-color-feedback-danger-subtle
  • --rd-color-focus-ring
  • --rd-radius-overlay