Inline Error Reveal
A field marks itself invalid: the error ring fades on and the message expands into place below.
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 { useId, useState, type FormEvent } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Inline Error Reveal
*
* A field that marks itself invalid: the error ring fades onto the
* input while the message expands into place underneath.About this pattern
Validation feedback that stays next to the thing that failed. On submit the field gains an error ring and the explanation expands underneath, pushing the rest of the form down by exactly its own height. Two decisions carry the pattern: the border 'changes color' by fading a ring over it rather than tweening the real border, which keeps the change on the compositor and lands on the exact error hue; and the height reveal is a short ease-out tween rather than a spring, because a spring would overshoot and drag the message text past its resting line. An error is bad news — it should appear calmly and be readable the instant it lands.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Checkout
Field-level validation: the input gains an error ring and the reason opens beneath it.
Related patterns
- Validation Summary ListA rejected submit answers with the whole list of what stopped it, each entry arriving a beat apart.
- Error Retry NudgeA failed action answers with one short damped nudge and becomes its own retry.
- Banner DismissAn announcement strip fades its message, then collapses its own height so the page closes the gap.