shadcn.io is an independent project built on shadcn/ui
Six boxes in two groups of three. Under them the line reads Enter your one-time password. until digits are typed, then it shows those digits.
Use it when the screen must show the current code, not only the boxes. Read a submitted value from a Field when you only need it on submit. In Vue, Ark UI does not verify the code.
Installation
Anatomy
Usage
<div class="flex flex-col gap-2">
<InputOTP @value-change="handleValueChange" :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 class="text-center text-sm">
{{ code === "" ? "Enter your one-time password." : `You entered: ${code}` }}
</div>
</div>FAQ
How is the value controlled?
The code lives in state and is passed to InputOTP with a change handler that writes every change back.
The value is an array of strings, one per slot, and each change arrives as details.value.
How is the code shown under the field?
The value is turned into one string. While it's empty, the line reads Enter your one-time password; otherwise You entered: and the digits.
How do I know when the code is complete?
Check the length in the change handler, or listen for completion.
onValueComplete fires when every slot is filled.
API Reference
Input OTP
Sets value-change="handleValueChange", value="value", index="0", index="1", index="2" and index="3". The rest is on the Input OTP page.
