Required Field Mark
Unanswered fields mark themselves one after another down the form — a wave, not a jolt.
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, useId, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Required Field Mark
*
* A submit that could not go through, reported as a wave rather than a
* jolt. The unanswered fields mark themselves one after another, top toAbout this pattern
What a form should do when a submit cannot go through. The unanswered fields mark themselves in document order at reading pace: a rail grows downward beside each one in the direction the wave is travelling, a dot settles next to the label, the caution outline fades in over the resting border and a short line appears underneath. Fields that were answered are left completely alone, so the pass runs only over what is actually wrong. Nothing shakes and nothing flashes — and filling a marked field retracts its mark, so the form keeps telling the truth while it is being fixed.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Form
A summary of what is missing above the form, with each field marked in place.
Related patterns
- Form Reset ClearA wash crosses each row in turn and the value is dropped while the row is covered.
- Form Autosave IndicatorA field that kept itself pulses its border once and writes the time underneath.
- Character Count LimitA small ring closes as the field fills, shows what is left once the cap is in sight, and tints once when the text runs past it.