InputOTP

One-time password input component for verification codes.

Usage

import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "@instruments/materia-ui/components/input-otp";

Set length to the code length and render exactly that many InputOTPSlots - slots take their position from their order in the tree, so there is no index prop.
Drive it controlled with value/onValueChange (a plain string), or react to onValueComplete once the string reaches full length.
Characters are filtered by validationType ("numeric" by default; "alpha", "alphanumeric" and "none" are also available) - pass "alphanumeric" for codes that contain letters.
Split slots into InputOTPGroups with an InputOTPSeparator between them for visual grouping only - it does not change the underlying value.

Builds on