Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99

--d --h --m --sGet Pro

OTP Verify Resend

ProNew

A verification code field that checks at the last digit, announces wrong codes and has a Resend button that counts down and restarts its wait each time.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

destination

cooldown30

length6

Guide and examples

When to use it

Use this for SMS and email codes on sign-in, sign-up and payment confirmation.

Do not use it without server-side rate limits on both sending and checking. See otp-lockout-attempts for the attempts side.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Log in Get Pro for $35

Props

OtpVerifyResend

Prop	Type	Default	Description
`destination`	`string`	-	Where the code went, already masked.
`verify`	`(code: string) => Promise<boolean>`	-	Check the code.
`onResend`	`() => void \| Promise<void>`	-	Send a new code.
`onVerified`	`() => void`	-	Code accepted.
`cooldown`	`number`	`30`	Seconds between sends.
`length`	`number`	`6`	Digits.

Accessibility

The field is described by the line that says where the code went ("We sent a 6-digit code to m***@acme.dev").
Resend is disabled with its remaining time in its name ("Resend code in 12s"); sending again restarts the wait and announces "A new code was sent.".
A wrong code is a role="alert" message and clears the field; a failed check has its own message.

Keyboard

Key	Action
Type digits	fills the code and checks at the last digit
Enter or Space on Resend	sends a new code when it is enabled

Testing

The pattern ships a Testing Library test (otp-verify-resend.test.tsx) that covers the description, the countdown, resending, verifying and wrong codes.