shadcn.io is an independent project built on shadcn/ui
Six boxes in two groups of three. After a full code, a spinner and the words Verifying code... appear under the boxes.
Show the spinner while the check is in flight so the pause does not look like a failure. A Button label can say the same thing if you submit by hand. In Vue, Ark UI does not verify the code.
Installation
Anatomy
Usage
<div class="flex flex-col gap-2">
<InputOTP
@value-change="handleValueChange"
@value-complete="handleComplete"
:value="value"
>
<InputOTPGroup>
<InputOTPSlot class="bg-background" :index="0" />
<InputOTPSlot class="bg-background" :index="1" />
<InputOTPSlot class="bg-background" :index="2" />
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
<InputOTPSlot class="bg-background" :index="3" />
<InputOTPSlot class="bg-background" :index="4" />
<InputOTPSlot class="bg-background" :index="5" />
</InputOTPGroup>
</InputOTP>
<div v-if="isVerifying" class="flex items-center gap-2 text-sm" role="status">
<Spinner />
<span>Verifying code...</span>
</div>
</div>FAQ
What starts the verification?
The field's completion callback, which fires once every slot is filled.
onValueComplete fires when every slot is filled.
How is the loading state shown?
A row with our Spinner and the text Verifying code..., rendered only while verifying. The row has role status, so the message is announced.
Is there a real request?
No. A two-second timer stands in for it. Replace it with your API call and turn the loading state off when it settles.
Should the field be locked while verifying?
Often, yes: pass disabled from the same loading state so the code can't change mid-request. The Success State example disables the field once the code is accepted.
API Reference
Input OTP
Sets value-change="handleValueChange", value-complete="handleComplete", value="value", index="0", index="1" and index="2". The rest is on the Input OTP page.
Spinner
No extra props in this demo. The rest is on the Spinner page.
