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 Solid, Ark UI does not check the code.
Installation
Anatomy
Usage
<Dialog>
<DialogTrigger asChild={props => <Button {...props()} variant="outline">Enter Code</Button>} />
<DialogContent class="sm:max-w-md">
<DialogHeader>
<DialogTitle>Verify your email</DialogTitle>
<DialogDescription>
We&aposFAQ
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
Sets asChild and props. The rest is on the Dialog page.
Button
Sets props and variant="outline". The rest is on the Button page.
