Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA dialog that confirms a sensitive action with a one-time code, checking it the moment the last digit is typed and keeping focus after a wrong code.
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.
Use this before disabling two-step sign-in, changing payout details or revealing secrets: places where a password alone is not enough proof.
Do not use it as the main sign-in screen. The check must happen on the server; verify only carries the result back.
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.
| Prop | Type | Default | Description |
|---|---|---|---|
verify | (code: string) => Promise<boolean> | - | Resolve true when the code is right. A rejection shows the "could not check" message. |
onConfirm | () => void | - | Runs after verification. |
length | number | 6 | Digits in the code. |
children | ReactNode | - | The trigger. |
title, description | ReactNode | - | Dialog text. |
one-time-code work.aria-invalid, is announced in a role="alert" message and clears the field; a failed check has its own message.| Key | Action |
|---|---|
| Type digits | fills the slots and checks at the last one |
| Backspace | removes a digit |
| Escape | cancels |
The pattern ships a Testing Library test (confirm-with-otp.test.tsx) that covers checking at the last digit, ignoring partial codes and announcing wrong and failed checks.