OTP Field

<OtpFieldlabel="Verification code"description="We sent a six-digit code to your email."length={6}groupAfter={3}/>

OtpField is the two-factor box: one slot per character, the caret moving itself as you type, and a paste anywhere in the field filling every slot at once.

The slots are square, and on the same 8px rhythm as every other control — base is the 32px control height. A taller-than-wide slot reads as a text field that has been squashed; a square one reads as a keycap, which is what it is.

Usage

import { OtpField } from "@heyo-sh/heyo-ui";<OtpField length={6} groupAfter={3} onValueComplete={verify} />;

Grouping

groupAfter inserts a dash after n slots. It is cosmetic, but it makes a six-digit code readable as two chunks instead of one blur.

<OtpField length={6} aria-label="Code" /><OtpField length={6} groupAfter={3} aria-label="Code" /><OtpField length={8} groupAfter={4} size="sm" aria-label="Backup code" />

Completion

onValueComplete fires the moment the last slot is filled — by typing or by pasting — which is where verification belongs. There is no submit button to wait for.

<OtpField  label="Verification code"  length={6}  onValueComplete={(code) => verify(code)}  error={failed ? "That code is not valid." : undefined}/>

<OtpField label="Verification code" length={6} error="That code is not valid." />

Properties