Login — Verification code with delivery rail

Six code inputs sit beside delivery details and recovery links. Use as an explicit second verification step after account identification.

ReactHTML

1440 × 900

Open in new tab

Component.tsx189 lines

export default function LoginVerificationCode() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div className="grid items-start gap-12 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
          <form>
            <div>
              <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
                Enter verification code
              </h1>
              <p className="mt-4 max-w-2xl text-lg text-pretty text-neutral-600">
                Use the six-digit code sent to your account email.
              </p>
            </div>
            <fieldset className="mt-8">
              <legend className="text-sm font-medium">Verification code</legend>
              <div className="mt-3 grid grid-cols-6 gap-2">
                <div>
                  <label
                    htmlFor="login-verification-code-digit-1"
                    className="sr-only"
                  >
                    Digit 1
                  </label>
                  <input
                    id="login-verification-code-digit-1"
                    name="digit-1"
                    aria-describedby="login-verification-code-code-hint"
                    type="text"
                    inputMode="numeric"
                    pattern="[0-9]"
                    maxLength={1}
                    required
                    autoComplete="one-time-code"
                    className="h-12 w-full min-w-0 rounded-md border border-neutral-300 text-center text-lg font-mono focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                  />
                </div>
                <div>
                  <label
                    htmlFor="login-verification-code-digit-2"
                    className="sr-only"
                  >
                    Digit 2
                  </label>
                  <input
                    id="login-verification-code-digit-2"
                    name="digit-2"
                    aria-describedby="login-verification-code-code-hint"
                    type="text"
                    inputMode="numeric"
                    pattern="[0-9]"
                    maxLength={1}
                    required
                    className="h-12 w-full min-w-0 rounded-md border border-neutral-300 text-center text-lg font-mono focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                  />
                </div>
                <div>
                  <label
                    htmlFor="login-verification-code-digit-3"
                    className="sr-only"
                  >
                    Digit 3
                  </label>
                  <input
                    id="login-verification-code-digit-3"
                    name="digit-3"
                    aria-describedby="login-verification-code-code-hint"
                    type="text"
                    inputMode="numeric"
                    pattern="[0-9]"
                    maxLength={1}
                    required
                    className="h-12 w-full min-w-0 rounded-md border border-neutral-300 text-center text-lg font-mono focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                  />
                </div>
                <div>
                  <label
                    htmlFor="login-verification-code-digit-4"
                    className="sr-only"
                  >
                    Digit 4
                  </label>
                  <input
                    id="login-verification-code-digit-4"
                    name="digit-4"
                    aria-describedby="login-verification-code-code-hint"
                    type="text"
                    inputMode="numeric"
                    pattern="[0-9]"
                    maxLength={1}
                    required
                    className="h-12 w-full min-w-0 rounded-md border border-neutral-300 text-center text-lg font-mono focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                  />
                </div>
                <div>
                  <label
                    htmlFor="login-verification-code-digit-5"
                    className="sr-only"
                  >
                    Digit 5
                  </label>
                  <input
                    id="login-verification-code-digit-5"
                    name="digit-5"
                    aria-describedby="login-verification-code-code-hint"
                    type="text"
                    inputMode="numeric"
                    pattern="[0-9]"
                    maxLength={1}
                    required
                    className="h-12 w-full min-w-0 rounded-md border border-neutral-300 text-center text-lg font-mono focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                  />
                </div>
                <div>
                  <label
                    htmlFor="login-verification-code-digit-6"
                    className="sr-only"
                  >
                    Digit 6
                  </label>
                  <input
                    id="login-verification-code-digit-6"
                    name="digit-6"
                    aria-describedby="login-verification-code-code-hint"
                    type="text"
                    inputMode="numeric"
                    pattern="[0-9]"
                    maxLength={1}
                    required
                    className="h-12 w-full min-w-0 rounded-md border border-neutral-300 text-center text-lg font-mono focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                  />
                </div>
              </div>
            </fieldset>
            <p
              id="login-verification-code-code-hint"
              className="mt-4 text-sm text-neutral-600"
            >
              Enter each digit separately. Codes expire after 10 minutes.
            </p>
            <div className="mt-6">
              <button
                type="submit"
                className="inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                Verify account
              </button>
            </div>
          </form>
          <aside className="rounded-lg bg-neutral-50 p-6">
            <h2 className="text-base font-semibold">Delivery details</h2>
            <p className="mt-3 break-words text-sm text-neutral-600">
              name@example.com
            </p>
            <p className="mt-3 text-sm text-neutral-600">
              Check your inbox and spam folder.
            </p>
            <div className="mt-6 space-y-4 text-sm">
              <p>
                <a
                  href="#"
                  className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                >
                  Send another code
                </a>
              </p>
              <p>
                <a
                  href="#"
                  className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                >
                  Change email address
                </a>
              </p>
              <p>
                <a
                  href="#"
                  className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                >
                  Use recovery method
                </a>
              </p>
            </div>
          </aside>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for a second factor or email access code. Choose login-magic-link when users follow an email link instead. Variations: use four digits, add a masked phone destination, or show a recovery-key option.
Hierarchy: The 30px h1 leads to a 14px code legend, six single-character inputs and Verify account. The delivery rail contains one email, a 10-word note and three recovery actions. Heading up to 6 words; lede up to 16.
Responsive: Below 1024px the delivery panel moves below the form. Six min-w-0 inputs share the available width at 320px. The title and section padding increase at 640px.
Layout: White section with a 1152px max-w-6xl container, 24px side gutters and 64px vertical padding, increasing to 96px at 640px. A 2fr/1fr grid with 48px gaps starts at lg. The wider form holds a six-column code row with 8px gaps and 48px-high fields. The delivery rail uses neutral-50 and p-6.
States: Each input accepts one numeric character and has a visible keyboard-focus outline; native validation enforces the pattern. Users tab between fields. Resend and verification require application integration; no automatic advance or countdown is included.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│Enter verification code                  Delivery details     │
│Code delivery explanation                name@example.com     │
│Verification code                        Delivery hint        │
│[0] [0] [0] [0] [0] [0]                  [Send again]         │
│Code expiration hint                     [Change email]       │
│[Verify account]                         [Use recovery]       │
└──────────────────────────────────────────────────────────────┘

View all

Login — Verification code with delivery rail

Pattern notes

Login — Account picker with credential pane

Login — Card over full-bleed media

Login — Centred card

Login — Verification code with delivery rail

Pattern notes

More in Login

Login — Account picker with credential pane

Login — Card over full-bleed media

Login — Centred card