Validation Summary List
A rejected submit answers with the whole list of what stopped it, each entry arriving a beat apart.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Validation Summary List
*
* A submit that could not go through, answered with the whole list of
* what stopped it. The panel opens above the form on a short easedAbout this pattern
The counterpart to marking fields one by one: a long form that comes back rejected needs one place that says how many things are wrong and where they are. The panel opens above the form on a short eased height — never a spring, because words dragged past their resting line and back are words you have to re-read — and takes room the fields give up rather than floating over them. Entries then arrive from the panel's own left edge, a beat apart, so the list reads as a list being written rather than a wall landing at once. Each entry is a control that takes focus to the field it names, and the panel carries role=alert so the count is spoken as soon as it exists.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Form
A blocked save gathers everything it objects to into one banner above the form.
Related patterns
- Inline Error RevealA field marks itself invalid: the error ring fades on and the message expands into place below.
- Offline Banner DropA connection bar opens down out of the top edge, holds while the app retries, then retracts once it is back.
- Password Strength BarA segmented meter fills bar by bar and shifts hue as a password improves.