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

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

OTP Lockout Attempts

ProNew

A code field that tells you how many tries are left after each wrong code, disables itself for a counted-down lockout and returns with fresh attempts.

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.

maxAttempts3

lockSeconds30

length6

Guide and examples

When to use it

Use this wherever a short code gates something sensitive: two-step sign-in, payments, account recovery.

Do not rely on it as protection. Enforce attempts and lockouts on the server and keep this state in sync with its answers.

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

OtpLockoutAttempts

Prop	Type	Default	Description
`verify`	`(code: string) => Promise<boolean>`	-	Check the code.
`onVerified`	`() => void`	-	Code accepted.
`maxAttempts`	`number`	`3`	Wrong tries before the lock.
`lockSeconds`	`number`	`30`	Lockout length.
`length`	`number`	`6`	Digits.

Accessibility

Each wrong code says "1 attempt left" and sets aria-invalid; the last one switches to "Try again in 30 seconds".
The lockout countdown is visible every second but announced only every ten seconds and in the last three.
This mirrors your server's rate limit for the person; it is not the limit itself.

Keyboard

Key	Action
Type digits	checks at the last digit
The field is disabled during the lockou	The field is disabled during the lockout

Testing

The pattern ships a Testing Library test (otp-lockout-attempts.test.tsx) that covers attempts left, locking with a countdown, unlocking with fresh attempts and success.