TrademarkTrademark
Docs
Ctrl k
Search docs...
Form Controls

FormErrorSummary

Updated: October 17, 2026
View on GitHub
Soon
Not released yet. This is on main and is not in any published version yet. It will not install today.

FormErrorSummary lists a form's errors at the top after a failed submit. Each entry links to its field, and activating it moves focus into the control. When the summary appears, or its errors change, it takes focus itself, so a keyboard or screen reader user is brought to it rather than left on the submit button wondering why nothing happened. With no errors it renders nothing, so it can stay in the form.

Errors

errors takes either a map from control id to message, which is the shape most validation libraries return, or a list of { id, message }. Empty messages are skipped. An entry without an id, such as a server error that belongs to no field, is listed as plain text.

The ids are the controls' ids, the same ones a Field uses, so the link lands on the right element.

Focus

autoFocus is on by default. Turn it off when the summary is on screen from the first render, like the preview above, because taking focus on page load moves a screen reader away from the top of the page.

API reference

Type
Default
errorsrequired
A map from control id to message, or a list of { id, message }.
FormErrorItem[]Record<string, ReactNode>
—
title
Heading above the list. Defaults to "Check the highlighted fields".
string—
autoFocus
Move focus to the summary when it appears or its errors change.
booleantrue
span
Columns to occupy inside a Form grid.
number—
…and every FlexProps propinherited—
Edit this page on GitHub
TrademarkTrademark
Built with curiosity by Lorant One and the Design Engineers Club