KQ-695 · TWO/FACTOR

Two Factor

A sign-in confirmation with two routes on a tablist: a code, or an approval on a device. The knob slides between them on snap while the panel glides to a measured height; the code field's next empty cell holds a caret that pulses while the prompt waits and each digit lands on flick, and the device route draws a phone whose screen breathes on drift until approval lights it. Either route ending in verified stamps a chip into the header on recoil; a wrong code nudges the cells on snap, raises an alert and clears.

KQ-695 · TWO/FACTOR

Coldbrook Bank sign-in

From your authenticator app.

Authenticator shows 482 913

Code · waiting

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/two-factor

Props

method / defaultMethod: "code" | "device"; default "code"; Which route is showing.
value / defaultValue: string; default ""; The code, digits only. A controlled host clears it after a failure.
status / defaultStatus: "waiting" | "checking" | "verified" | "failed"; default "waiting"; The outcome; the host decides it. A submit moves the component to checking.
onSubmit: (code: string) => void; default —; Fires when the last digit lands, or Enter is pressed on a full code.
length: number; default 6; Digits in the code.
deviceName: string; default "your device"; Named in the device route and its announcements.
errorMessage: string; default "That code did not match."; The alert line under failed.
label: ReactNode; default —; Visible heading; omit it and pass aria-label.

Prop	Type	Default	Description
method / defaultMethod	"code" \| "device"	"code"	Which route is showing.
value / defaultValue	string	""	The code, digits only. A controlled host clears it after a failure.
status / defaultStatus	"waiting" \| "checking" \| "verified" \| "failed"	"waiting"	The outcome; the host decides it. A submit moves the component to checking.
onSubmit	(code: string) => void	—	Fires when the last digit lands, or Enter is pressed on a full code.
length	number	6	Digits in the code.
deviceName	string	"your device"	Named in the device route and its announcements.
errorMessage	string	"That code did not match."	The alert line under failed.
label	ReactNode	—	Visible heading; omit it and pass aria-label.