Login — Recovery steps beside email form

A recovery explanation and numbered steps sit beside an email request form. Use to make the reset process clear before requesting a link.

ReactHTML

1440 × 900

Open in new tab

Component.tsx87 lines

export default function LoginRecoveryPanel() {
  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-2">
          <div>
            <div>
              <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
                Recover account access
              </h1>
              <p className="mt-4 max-w-2xl text-lg text-pretty text-neutral-600">
                Explain what happens after a recovery request.
              </p>
            </div>
            <ol role="list" className="mt-8 space-y-6">
              <li className="flex gap-4">
                <span className="text-sm font-semibold">01</span>
                <div>
                  <h2 className="text-base font-semibold">
                    Enter account email
                  </h2>
                  <p className="mt-1 text-sm text-neutral-600">
                    Use the email linked to your account.
                  </p>
                </div>
              </li>
              <li className="flex gap-4">
                <span className="text-sm font-semibold">02</span>
                <div>
                  <h2 className="text-base font-semibold">Check your inbox</h2>
                  <p className="mt-1 text-sm text-neutral-600">
                    Follow the time-limited recovery link.
                  </p>
                </div>
              </li>
            </ol>
          </div>
          <form className="min-w-0 rounded-lg border border-neutral-200 bg-white p-6">
            <h2 className="text-lg font-semibold">Request recovery link</h2>
            <div className="mt-6">
              <div className="min-w-0">
                <label
                  htmlFor="login-recovery-panel-email"
                  className="block text-sm font-medium"
                >
                  Email
                </label>
                <input
                  id="login-recovery-panel-email"
                  name="email"
                  type="email"
                  placeholder="name@example.com"
                  required
                  autoComplete="email"
                  aria-describedby="login-recovery-panel-email-hint"
                  className="mt-2 h-10 w-full min-w-0 rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                />
                <p
                  id="login-recovery-panel-email-hint"
                  className="mt-2 text-sm text-neutral-600"
                >
                  Check spam folders if the message does not arrive.
                </p>
              </div>
            </div>
            <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 w-full"
              >
                Send recovery link
              </button>
            </div>
            <p className="mt-6 text-sm">
              <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"
              >
                Back to sign in
              </a>
            </p>
          </form>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for a dedicated password recovery step. Choose an inline recovery link for a simple sign-in screen. Variations: add a link-expiry note, explain administrator recovery, or use a username field.
Hierarchy: A 30px h1 precedes two 16px step titles, followed by a smaller form heading, email and submit. Heading up to 6 words, explanation up to 18, step titles up to 4, and hints up to 12.
Responsive: Under 1024px the explanation stacks above the form. Body copy wraps freely; the input and submit use the available card width. At sm the title and section padding increase.
Layout: White section with a 1152px max-w-6xl container, 24px side gutters and 64px vertical padding, increasing to 96px at 640px. Two equal columns with a 48px gap begin at lg. The left column holds an introduction and two numbered rows 24px apart. The right p-6 card contains one email field and a full-width submit.
States: Links and controls have a 2px neutral-900 keyboard-focus outline offset by 2px. Filled actions change to neutral-700 on hover, outlined actions to neutral-50, and underlined links to neutral-600. Native form fields retain browser validation; controls describe structure and need application integration for persistence or navigation.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│Recover account access           Request recovery link        │
│Recovery explanation             Email                        │
│01 Enter account email           [name@example.com      ]     │
│02 Check your inbox              Email delivery hint          │
│                                 [Send recovery link]         │
│                                 [Back to sign in]            │
└──────────────────────────────────────────────────────────────┘

View all

Login — Recovery steps beside email form

Pattern notes

Login — Account picker with credential pane

Login — Card over full-bleed media

Login — Centred card

Login — Recovery steps beside email form

Pattern notes

More in Login

Login — Account picker with credential pane

Login — Card over full-bleed media

Login — Centred card