Form Reset Clear
A wash crosses each row in turn and the value is dropped while the row is covered.
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, useRef, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Form Reset Clear
*
* Clearing a form as a legible pass rather than an instant blank. A wash
* crosses each row in turn, the value is dropped at the moment the rowAbout this pattern
Emptying a form so the reset can be watched instead of guessed at. A wash arrives over the first row, the value underneath is dropped at the moment the row is fully covered, and the empty field with its placeholder is revealed as the wash leaves — then the next row, and the next. A single line travels with each wash so the pass has a direction rather than a flicker. The wash has to hide a value to work, so it sits on the CSS system page colour and carries the field's own resting fill on top. Nothing shakes, nothing springs.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Data table
Clearing a filter set empties the conditions visibly rather than instantly.
Related patterns
- Required Field MarkUnanswered fields mark themselves one after another down the form — a wave, not a jolt.
- Conditional Section RevealPicking an option unfolds the extra fields it requires, the section easing its height open.
- Textarea AutogrowThe field takes one line-height more as the text wraps, easing into it rather than snapping.