Demo
Default
·
·
·
·
·
·
Default configuration without specifying any props.
<VerificationInput />Numbers only
·
·
·
·
·
·
Accept only numbers and use numpad on mobile devices.
<VerificationInput validChars="0-9" inputProps={{ inputMode: "numeric" }} />Password mode
·
·
·
·
·
·
Hide the input value. This will also set the input type as password.
<VerificationInput passwordMode={true} />Custom length
·
·
·
·
·
Configure the input to accept 5 digits.
<VerificationInput length={5} />Custom placeholder
_
_
_
_
_
_
Use any character as placeholder (empty string for no placeholder).
<VerificationInput placeholder="_" />Autofill OTP (iOS)
·
·
·
·
·
·
Let iOS read OTP codes from text message notifications (see docs).
💡
In order to test this, you need to send a text message containing e.g. Code: 123456 to your phone.
<VerificationInput inputProps={{ autoComplete: "one-time-code" }} />