The list of form errors at the top of a form, focused on submit, each linking to its field.
ErrorSummary follows the GOV.UK pattern: after a failed submit it takes focus, lists every error as a link, and each link moves focus to the field.
Installation
npx shadcn@latest add KezLahd/rime/error-summaryAlso installs: base, icon.
Usage
import { ErrorSummary } from "@/components/ui";
<ErrorSummary errors={[{ id: "email", message: "Enter an email address" }]} focusKey={submitCount} />Examples
Default
Fix 2 things to continue
Select a problem to go straight to its field.
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
ErrorSummary
| Prop | Type | Default | Description |
|---|---|---|---|
| errorsRequired | ReadonlyArray<FormError> | ||
| title | string | ||
| focusKey | number | string | Change this (e.g. a submit counter) to move focus to the summary again. Focus moves on mount and whenever it changes. | |
| className | string |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
This component has no tokens of its own; it reads the system tokens below.
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --danger-fill | tokens.css | … |
| --danger-gradient | tokens.css | … |
| --danger-ink | tokens.css | … |
| --danger-line | tokens.css | … |
| --dur | tokens.css | … |
| --ease | tokens.css | … |
| --focus-color | tokens.css | … |
| --focus-ring | tokens.css | … |
| --glow-danger | tokens.css | … |
| --ink-inverse | tokens.css | … |
| --ink-muted | tokens.css | … |
| --ink-secondary | tokens.css | … |
| --line-soft | tokens.css | … |
| --r-2xs | tokens.css | … |
| --r-md | tokens.css | … |
| --r-sm | tokens.css | … |
| --rgb-danger | tokens.css | … |
| --shadow-lift | tokens.css | … |
| --shadow-specular-dark | tokens.css | … |
| --surface-solid | tokens.css | … |
| --text-caption | tokens.css | … |
| --text-card-title | tokens.css | … |
| --text-micro | tokens.css | … |
| --text-small | tokens.css | … |
Accessibility
- role="alert" and focus moves to the summary when focusKey changes, so it is announced once per submit.
Do and don't
Do
- Use the same message text here and under the field.
Don't
- Don't show it before the first submit.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open error-summary.md