shadcn.io is an independent project built on shadcn/ui
Enter Code opens Verify your email. The description says a 6-digit code was sent. Six slots sit under Verification code, with Resend under them. Verify stays off until all six digits are in.
Use it to collect a code without leaving the page. Resend does nothing until you wire it. Account details beside the code fit a Sheet. In Svelte, Ark UI does not check the code.
Installation
Anatomy
Usage
<Dialog><DialogTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">Enter Code</Button>{/snippet}</DialogTrigger><DialogContent class="sm:max-w-md"><DialogHeader><DialogTitle>Verify your email</DialogTitle><DialogDescription>We've sent a 6-digit code to your email address. Please enter it below.</DialogDescription></DialogHeader><Field><FieldLabel>Verification code</FieldLabel><div class="flex justify-center"><InputOTP onValueChange={handleValueChange} value={value}><InputOTPGroup><InputOTPSlot index={0} /><InputOTPSlot index={1} /><InputOTPSlot index={2} /><InputOTPSlot index={3} /><InputOTPSlot index={4} /><InputOTPSlot index={5} /></InputOTPGroup></InputOTP></div><FieldDescription class="text-center">Didn't receive the code?{" "}<Button class="h-auto p-0" variant="link">Resend</Button></FieldDescription></Field><DialogFooter><Button disabled={!complete}>Verify</Button></DialogFooter></DialogContent></Dialog>FAQ
Should it submit on the sixth digit?
Only if verification is instant and errors are rare. Otherwise enable Verify at six digits, as here, and let Enter submit.
Can people paste the code?
Yes. Pasting a code fills the slots at once, so people can copy it from an email or a text message.
How is the value read?
The field is controlled, and Verify checks that all six digits are there. The value is an array of digits, from onValueChange.
Should Resend have a cooldown?
Yes: disable it for 30 to 60 seconds after a send and show the countdown. Resend is a link-style Button here; wire it to your request.
API Reference
Dialog
No extra props in this demo. The rest is on the Dialog page.
Button
Sets props, variant="outline", variant="link" and disabled={!complete}. The rest is on the Button page.
Field
No extra props in this demo. The rest is on the Field page.
Input OTP
Sets onValueChange={handleValueChange}, value={value}, index={0}, index={1}, index={2} and index={3}. The rest is on the Input OTP page.
