# ErrorSummary

> The list of form errors at the top of a form, focused on submit, each linking to its field.

Category: Forms. Docs page: https://rime.mjsons.net/components/error-summary

## Installation

```bash
npx shadcn@latest add KezLahd/rime/error-summary
```

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.

## Usage

```tsx
import { ErrorSummary } from "@/components/ui";

<ErrorSummary errors={[{ id: "email", message: "Enter an email address" }]} focusKey={submitCount} />
```

## Props: ErrorSummary

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `errors` (required) | `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` |  |  |

## Examples

### Default

```tsx
<ErrorSummary errors={errors} focusKey={attempt} />
```

## Theme tokens

System tokens it reads: `--danger-fill`, `--danger-gradient`, `--danger-ink`, `--danger-line`, `--dur`, `--ease`, `--focus-color`, `--focus-ring`, `--glow-danger`, `--ink-inverse`, `--ink-muted`, `--ink-secondary`, `--line-soft`, `--r-2xs`, `--r-md`, `--r-sm`, `--rgb-danger`, `--shadow-lift`, `--shadow-specular-dark`, `--surface-solid`, `--text-caption`, `--text-card-title`, `--text-micro`, `--text-small`.

## Accessibility

- role="alert" and focus moves to the summary when focusKey changes, so it is announced once per submit.

## Do

- Use the same message text here and under the field.

## Don't

- Don't show it before the first submit.