Input OTP
One slot per character for one-time codes, with paste and autofill support.
Sent to the authenticator app on your phone.
Usage
import {
InputOTP,
InputOTPGroup,
InputOTPSeparator,
InputOTPSlot,
} from "@zynactra/ui/input-otp"<InputOTP maxLength={6}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>Restrict characters with pattern (for example REGEXP_ONLY_DIGITS from input-otp) and submit automatically with onComplete.
Guidelines
- Say where the code was sent and offer a resend link below the field.
- Six digits split 3 + 3. Don't split four-digit codes.
- Submit on the last character; don't make people find a button.
API reference
Built on input-otp.