Verify code
A six-digit one-time code, grouped in threes, with a resend action for the email that never arrived.
How it’s composed
- One-time code field handles paste, autofill from the operating system and moving between cells;
group-lengthssplits the six digits into two groups of three, which is easier to read back. - Field names the code for assistive technology; the visible cells stay unlabeled.
- Button puts the secondary resend before the primary verify, in reading order.
Make it yours
Submit automatically when the last digit is entered, and start a cooldown on the resend action after it is used.
More patterns
Sign in
Email and password sign-in with a remember-me option, a recovery link and a single primary action.
Password recovery
Request a reset link by email, with a quiet description of what happens next and a route back to sign in.
Notification settings
Grouped switches for email and push notifications, each with a one-line explanation.
Invite teammates
Invite by email with a role picker, above the list of people who already have access.
Choose a plan
Three plans as a radio group, with the price and what each includes, and one action to continue.
Upload progress
A list of files uploading in parallel, each with its own progress and a finished state.
Send feedback
A short rating and an open comment, the two questions that get answered most often.
Schedule a meeting
Pick a day on the calendar and one of the open time slots beside it.
Sound settings
Volume sliders for each channel and a switch for spatial audio.
Profile card
A person, their role and a few numbers, with follow and message actions.
API key
A secret key shown once, with a copy action, a warning and a way to roll it.