Two Factor Method Switch
Choosing another second factor slides the selection ring, crossfades the instructions and re-arms the field.
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 { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Two Factor Method Switch
*
* Picking another second factor slides the selection ring onto the new
* row, crossfades the instructions, and re-arms the field underneath.About this pattern
Three things have to change together when someone gives up on one second factor and reaches for another, and doing them in the wrong order makes the screen feel broken. The selection ring is a single shared element that travels between rows — every row is the same height, so it translates and never stretches over a label — the instruction block crossfades in the direction the eye just moved, and the entry field clears itself and sweeps its underline to prove it did. The instructions sit in a fixed-height slot because the sentences differ in length and a picker that grows under the cursor is a picker people misclick.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Two-factor prompt
A list of second factors where choosing another rewrites the instructions in place.
Related patterns
- Trust This DeviceFlipping the switch drops the device into the trusted list below, already marked.
- Login Error RecoverA refused sign-in expands its reason under the field, wipes only the password, and hands the caret back.
- OTP Code EntrySix boxes: the waiting box lifts, digits settle in, and a wrong code answers with one short nudge.