Form validation

@summonware/ui · form-validation · P1 · Forms

Usage

An accessible, announced summary of every field currently in error — the piece a schema-driven form (react-hook-form + zod, both already dependencies here) needs beyond per-field errors, which `TextInput`/`Select`'s own `error` prop already covers. `role="alert"` + `aria-live` means a screen reader announces it the moment validation fails, not only when the user happens to tab past a broken field.

import { ValidationSummary } from '@summonware/ui';

Best practices

DoShow this once, at the top of the form, on submit — not live on every keystroke. A summary that appears mid-typing is noise, not help.

DoEvery message here should also exist inline on its field via `error`. The summary is a map to the errors, not a replacement for showing them where they occur.

Don'tRender an empty summary box as a placeholder. The component already returns `null` with zero errors — do not wrap it in a visible container regardless.

Examples

Common configurations, variations and states.

Validation summary with inline errors

2 fields need attention

Email is required
Password must be at least 8 characters

Email is required

Password

Password must be at least 8 characters

The same failures shown twice: once as a scannable list, once on the field that actually failed.

Reference variants

0 of 1 labels from the reference are demonstrated above.

Form Validation