Form Error Summary

ProNew

A summary of every error in a form: it takes focus after a failed submit, and each message is a link that moves focus to the field that needs fixing.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/form-error-summary

Usage

Each id is the id of the control, or of a fieldset / group wrapper: focus goes to the first control inside it.

Props

Prop	Type	Description
`errors`	`{ id: string; message: string }[]`	One entry per problem. Write messages that say what to do.
`title`	`ReactNode`	Default "There is a problem".
`focusSignal`	`number`	Increase it after a failed submit to focus the summary.

Accessibility

The summary is a role="alert" region named by its heading and focusable (tabindex="-1"), so focus lands on it and a screen reader reads the title, the count and the list.
Each message is a link to its field. Activating it focuses the control (or the first control of a group) and scrolls it to the middle; smooth scrolling is turned off with prefers-reduced-motion.
Still mark each field itself with aria-invalid and a message next to it: the summary is a way in, not a replacement for field-level errors.

Testing

The component ships with a Testing Library test (form-error-summary.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/form-error-summary

Usage

Each id is the id of the control, or of a fieldset / group wrapper: focus goes to the first control inside it.

Props

Prop	Type	Description
`errors`	`{ id: string; message: string }[]`	One entry per problem. Write messages that say what to do.
`title`	`ReactNode`	Default "There is a problem".
`focusSignal`	`number`	Increase it after a failed submit to focus the summary.

Accessibility

The summary is a role="alert" region named by its heading and focusable (tabindex="-1"), so focus lands on it and a screen reader reads the title, the count and the list.
Each message is a link to its field. Activating it focuses the control (or the first control of a group) and scrolls it to the middle; smooth scrolling is turned off with prefers-reduced-motion.
Still mark each field itself with aria-invalid and a message next to it: the summary is a way in, not a replacement for field-level errors.

Testing

The component ships with a Testing Library test (form-error-summary.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.