# Step validation

When Continue is pressed with problems: a summary at the top lists each problem as a jump link, and each field shows its own error. Focus moves to the summary.

- **Group:** Wizard and stepper · **family:** `wizard-stepper` · **shadcn:** Alert
- **Build:** `Alert` destructive + react-hook-form errors.
- **In apps/admin today:** Alert exists.
- **Client component:** yes. 

## Content rules

- "Add a GBP price", "Choose at least one cloth".

## Do

- Match summary text to field errors.

## Don't

- Clear the summary until the problems are fixed.

## Accessibility

- **Keyboard:** Links jump to fields and focus them.
- **ARIA:** Summary `role="alert"` with `tabIndex=-1`, focused on submit.
- **Focus:** Summary first, then the field from a link.

## Tokens

`--font-voice` `--font-stretch-title` `--s-3` `--s-4` `--destructive` `--r-card` `--text-card` `--w-semibold` `--s-1` `--text-small`

## Files

`step-validation.html` live specimen · `step-validation.css` kit rules · `step-validation.d.ts` props · full page: `docs/components/step-validation/` (phone: `m/`).