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 Svelte, Ark UI does not verify the code.
Installation
Anatomy
Usage
<div class="flex flex-col gap-2"><InputOTP invalid={invalid} onValueChange={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>{#if invalid}<p class="text-destructive text-sm" role="alert">{error}</p>{:else}{/if}<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}, onValueChange={handleValueChange}, value={value}, index={0}, index={1} and index={2}. The rest is on the Input OTP page.
