shadcn.io is not affiliated with official shadcn/ui
Email Verification Onboarding Block for Solid
A booking app's email step as a whole screen: a six-digit code field, a masked address, a Send a new code button with a 30-second wait, a Wrong email? swap to a new address, and a result that replaces the form.
Installation
Overview
Confirm the address before the first booking with this email verification step for Solid with Ark UI. It is a step of Nookwick, a coworking-desk booking app, as a whole screen: the page's rails and one band, a step header (“Step 2 of 5” and a hairline) and a six-digit Input OTP under a masked address (o***@mail.example). Paste works, a wrong code is refused in a line that is always reserved, and three misses ask for a new code. Send a new code is a Countdown Button that makes you wait 30 seconds between sends; Wrong email? swaps the field for an email Input and the same step sends to the new address. Verify email is the one Shine Button. A right code replaces the form in place with what was confirmed. The code is typed in the demo and a hint says what it is.
FAQ
What code does the demo accept, and how do I check a real one?
DEMO_CODE, 482913, and the hint under the field says so. The check is a comparison in verify. In your app send the six digits and the address to your server there and read the answer: a right code, a wrong one, or too many tries. Never compare a code in the browser.
What happens after a wrong code?
The field clears, the line under it says how many tries remain (“That code didn't match. 2 tries remain.”) and focus goes back to the first digit. The third miss says to send a new code, and Verify email keeps refusing until you do. MAX_MISSES sets the number; enforce the same limit on your server, since the browser can be reset.
How does Send a new code wait?
The Countdown Button counts down from COOLDOWN (30) seconds after each press, with a fill draining behind the label, and keeps its width. A new code clears the field and the misses. In your app start the count from your server's retry-after, with the button's running prop, so reloading the page can't skip the wait.
How does Wrong email? work?
It swaps the code field for an email field in the same space, so nothing on the page moves. Send a code here checks the address, shows the masked new one and returns to the code field. Back to the code returns without a change. Both fields share one grid cell, and the one you aren't using is hidden and inert.
What stays local in the demo, and how do I wire it?
Everything: no email is sent, nothing is stored, and the result says so. In your app, call your server in changeAddress, resend and verify, keep the masked address from its response, and send people on from the result.
Is it accessible from the keyboard and a screen reader?
Yes. The field is named “Verification code” with its hint as the description, each digit is a slot you can arrow between, and paste fills them all. Every refusal and result is spoken once by the page's single polite status, and the result takes focus on its heading. The digits keep their order in a right-to-left page.