Field Valid Check
A small mark strokes itself in at the right edge of a field the moment its value becomes acceptable.
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, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Field Valid Check
*
* The quiet half of validation: the moment a field's value becomes
* acceptable, a tick strokes itself in at the right edge and a softAbout this pattern
Validation usually only speaks up when something is wrong, which leaves the user guessing on the way in. This is the other half: the keystroke that completes a value is answered by a mark resolving at the right edge and a soft ring settling over the border. The slot for the mark is reserved whether or not it is showing, so arriving at an acceptable value never re-flows the text that was just typed, and the border changes color by fading a ring over it rather than tweening the real border — the change stays on the compositor and lands on the exact hue instead of drifting through gray. The mark is an icon, so it may arrive with a little size; nothing typographic moves at all.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Checkout
Card fields mark themselves complete at the right edge while you type.
Related patterns
- Copy ConfirmationA copy button trades its icon for a drawn tick and its label for "Copied", then quietly changes back.
- Rating Stars FillStars light left to right under the pointer, each settling a fraction after the one before it.
- Changes Saved PillA pill drifts up from the toolbar to confirm an autosave, then dissolves.