Password Match Confirm
The check settles into the confirm field the moment the two entries are identical.
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 { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Password Match Confirm
*
* The confirm field agreeing with the first. Instead of waiting for a
* submit to say no, the check settles in the moment the two entries areAbout this pattern
Most sign-up screens wait for a submit to say the two entries disagree, which turns a typo into a round trip. Here the answer arrives while the user is still typing: the check strokes into the confirm field the moment the values are identical, the border shifts colour on a plain transition rather than popping a ring, and the hint line swaps in place at a constant size so nothing below it moves. The check occupies its slot whether or not it is drawn, which is what keeps the field from reflowing on the first agreeing character. The confirm field types itself once on mount so the moment is visible in a preview; touching it stops the script and leaves ordinary controlled inputs.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Sign-up flow
Field-level answers that arrive while typing rather than on submit.
Related patterns
- Sign-in Form EntranceHeading, fields and button rise into place in one quick sequence as the screen opens.
- Login Error RecoverA refused sign-in expands its reason under the field, wipes only the password, and hands the caret back.
- Inline Completion GhostA faint prediction appears ahead of the caret and firms up to real content when it is accepted.