shadcn.io is an independent project built on shadcn/ui
Six boxes in two groups of three, and a hint that says Hint: Try entering 123456. Another complete code shows Invalid code. Please try again.
Show the error as soon as the code is complete and wrong. A Field error on submit is enough when you only check after a button press. In Vue, Ark UI does not verify the code.
Installation
Anatomy
Usage
<div class="flex flex-col gap-2">
<InputOTP :invalid="invalid" @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>
<p v-if="invalid" class="text-destructive text-sm" role="alert">{{ error }}</p>
<p class="text-muted-foreground text-xs">Hint: Try entering 123456</p>
</div>FAQ
When is the code checked?
In the change handler, once the code has six characters. A shorter code clears the error, so it disappears as soon as people start correcting.
How is the error shown?
A paragraph in text-destructive with role alert, rendered only while there's an error, so screen readers announce it when it appears.
Which code is accepted?
123456, the VALID_CODE constant, as the hint under the field says. In your app, send the code to the server and show its error instead.
API Reference
Input OTP
Sets invalid="invalid", value-change="handleValueChange", value="value", index="0", index="1" and index="2". The rest is on the Input OTP page.
