Sign in
A sign-in block is the card that stands between a person and their account: the fields that carry a credential, one action that submits them, and the ways out, recover a password, confirm a code, open an account instead. It is a small surface with an unusual amount of state. Every field has an empty, a focused, a filled and a rejected reading; the submit stays dead until what it submits exists; and nothing typed is thrown away when an attempt fails, because retyping a password after a server error is how people give up.
The interesting work is on the second screen. A six-digit code field looks like six inputs and behaves like one value: a paste has to spread across all six boxes rather than land in the first, backspace has to reach back into the box before it, the phone will only offer the code it just received if the field asks for it by name, and resend has to sit behind a countdown or repeated presses invalidate the code already in flight.
Sign in with phone
Best for
Signing in where the account is a phone number: the dial code and the number in one field
Anatomy
Brand tile · dial-code picker joined to the number · password with a reveal · Forgot password · Submit dead until both exist · third-party row
Sign up with phone
Best for
Opening an account on a phone number, where the password is being made, not recalled
Anatomy
Brand tile · name · dial code joined to the number · password with its four rules · terms before the action · third-party row · the way back to signing in
Verify identity
Best for
The code step after a sign-in: six boxes that take a paste, and a resend that waits its turn
Anatomy
Masked number in the copy · six boxes with auto-advance, backspace and paste · Confirm dead until all six · resend behind a 30-second count
Verify identity
We’ve sent a 6-digit code to +234 *** *** 4567. Enter it below to continue.
Check your spam folder, or resend it.
Using Sign in
Reach for it when
- The account is a phone number, so a dial code and the digits have to be entered and validated as one value.
- A code has to be confirmed after the password step, with a resend that cannot be hammered.
- Sign-up and sign-in share a brand, a layout and the same set of third-party providers.
- Password rules exist and the person should see which ones they have already met while typing.
Reach for something else when
- Re-confirming identity before a destructive action by someone already signed in: a small modal asking for the password alone interrupts far less than a full auth card.
- Collecting profile details once the account exists. That is a form layout with a heading where the subject changes, not an authentication card.
- A product with no password at all, only a mailed link: a single field and a button on the page beat a card whose rules, reveal and provider row have nothing to do.
Where it shows up
Phone-number accounts
Products where the account is a phone number rather than an email. The dial code and the digits are one value, so the picker sits inside the field and the pair is validated together instead of as two separate inputs.
Two-step confirmation
The screen after a correct password, where a code sent by text has to be entered. It carries its own resend, a countdown that gates it, and a masked hint of the number the code went to.
Account creation
Sign-up, where a password is being invented rather than recalled. The rules show which ones are already met as the person types, and the terms agreement sits where Forgot Password sits on the sign-in card.
Third-party sign-in
Products that accept an identity from an existing provider. The row sits under a labelled divider below the credential fields, so the form stays the default route and the providers read as the shortcut.
Questions
Should sign-in and sign-up live on the same screen?
Keep them as separate screens with a plain link between them. The two ask for different things: signing in recalls a credential, signing up invents one, so sign-up needs password rules, a terms agreement and usually a name field that would be clutter on a sign-in card. One form that toggles between the two also confuses password managers, which decide what to offer from the fields present.
How should a one-time code field behave?
Treat the boxes as a single value. A pasted code should spread across every box rather than land in the first, backspace should step back into the previous box, and each box needs its own label so a screen reader can say which digit it is on. Marking the field with the one-time-code autocomplete hint lets a phone offer the message it just received. Put resend behind a countdown.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPSign in
A sign-in block is the card that stands between a person and their account: the fields that carry a credential, one action that submits them, and the ways out, recover a password, confirm a code, open an account instead. It is a small surface with an unusual amount of state. Every field has an empty, a focused, a filled and a rejected reading; the submit stays dead until what it submits exists; and nothing typed is thrown away when an attempt fails, because retyping a password after a server error is how people give up.
The interesting work is on the second screen. A six-digit code field looks like six inputs and behaves like one value: a paste has to spread across all six boxes rather than land in the first, backspace has to reach back into the box before it, the phone will only offer the code it just received if the field asks for it by name, and resend has to sit behind a countdown or repeated presses invalidate the code already in flight.
Sign in with phone
Best for
Signing in where the account is a phone number: the dial code and the number in one field
Anatomy
Brand tile · dial-code picker joined to the number · password with a reveal · Forgot password · Submit dead until both exist · third-party row
Sign up with phone
Best for
Opening an account on a phone number, where the password is being made, not recalled
Anatomy
Brand tile · name · dial code joined to the number · password with its four rules · terms before the action · third-party row · the way back to signing in
Verify identity
Best for
The code step after a sign-in: six boxes that take a paste, and a resend that waits its turn
Anatomy
Masked number in the copy · six boxes with auto-advance, backspace and paste · Confirm dead until all six · resend behind a 30-second count
Verify identity
We’ve sent a 6-digit code to +234 *** *** 4567. Enter it below to continue.
Check your spam folder, or resend it.
Using Sign in
Reach for it when
- The account is a phone number, so a dial code and the digits have to be entered and validated as one value.
- A code has to be confirmed after the password step, with a resend that cannot be hammered.
- Sign-up and sign-in share a brand, a layout and the same set of third-party providers.
- Password rules exist and the person should see which ones they have already met while typing.
Reach for something else when
- Re-confirming identity before a destructive action by someone already signed in: a small modal asking for the password alone interrupts far less than a full auth card.
- Collecting profile details once the account exists. That is a form layout with a heading where the subject changes, not an authentication card.
- A product with no password at all, only a mailed link: a single field and a button on the page beat a card whose rules, reveal and provider row have nothing to do.
Where it shows up
Phone-number accounts
Products where the account is a phone number rather than an email. The dial code and the digits are one value, so the picker sits inside the field and the pair is validated together instead of as two separate inputs.
Two-step confirmation
The screen after a correct password, where a code sent by text has to be entered. It carries its own resend, a countdown that gates it, and a masked hint of the number the code went to.
Account creation
Sign-up, where a password is being invented rather than recalled. The rules show which ones are already met as the person types, and the terms agreement sits where Forgot Password sits on the sign-in card.
Third-party sign-in
Products that accept an identity from an existing provider. The row sits under a labelled divider below the credential fields, so the form stays the default route and the providers read as the shortcut.
Questions
Should sign-in and sign-up live on the same screen?
Keep them as separate screens with a plain link between them. The two ask for different things: signing in recalls a credential, signing up invents one, so sign-up needs password rules, a terms agreement and usually a name field that would be clutter on a sign-in card. One form that toggles between the two also confuses password managers, which decide what to offer from the fields present.
How should a one-time code field behave?
Treat the boxes as a single value. A pasted code should spread across every box rather than land in the first, backspace should step back into the previous box, and each box needs its own label so a screen reader can say which digit it is on. Marking the field with the one-time-code autocomplete hint lets a phone offer the message it just received. Put resend behind a countdown.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
