Login — Passwordless email link

An open passwordless sign-in column with one email field, delivery tips and a password alternative. Use when access begins with an emailed link.

ReactHTML

1440 × 900

Open in new tab

Component.tsx30 lines

export default function LoginMagicLink() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-3xl px-6 py-24">
        <div className="mx-auto max-w-md">
          <span aria-hidden="true" className="flex size-12 items-center justify-center rounded-md bg-neutral-100 text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5"><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 6 9 7 9-7" /></svg></span>
          <h1 className="mt-6 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Sign in with an email link</h1>
          <p className="mt-4 text-lg text-pretty text-neutral-600">Enter your email to receive a secure sign-in link.</p>
          <form className="mt-8 grid gap-5">
            <div><label htmlFor="login-magic-link-email" className="block text-sm font-medium text-neutral-900">Email</label><input id="login-magic-link-email" name="email" type="email" autoComplete="username" required placeholder="name@example.com" aria-describedby="login-magic-link-expiry" className="mt-2 h-10 w-full 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" /></div>
            <button type="submit" className="w-full 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">Email me a sign-in link</button>
            <p id="login-magic-link-expiry" className="text-sm text-neutral-500">Hint describing how long the link remains valid.</p>
          </form>
          <details className="group mt-6">
            <summary className="flex cursor-pointer list-none items-center justify-between gap-4 py-3 text-sm font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden">
              Didn't get the email?
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5 shrink-0 transition-transform group-open:rotate-180"><path d="m6 9 6 6 6-6" /></svg>
            </summary>
            <ul role="list" className="grid gap-3 pb-3 text-sm text-neutral-600">
              <li>Check that the email address matches your account.</li>
              <li>Look in the spam or junk folder.</li>
              <li>Wait a few minutes before requesting another link.</li>
            </ul>
          </details>
          <footer className="mt-6 border-t border-neutral-200 pt-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">Sign in with a password instead</a></footer>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for email-link authentication and explain delivery or expiry constraints. Pick login-centered-card when users must enter a password. Variations: add a security note, show a sent confirmation in a separate layout, or point the alternate link to provider sign-in.
Hierarchy: A decorative envelope leads to a 30px h1 and 18px explanation, then a labelled Email field and Email me a sign-in link action. An expiry note is a 14px hint tied to the field. Three delivery tips appear in the disclosure. Slots: headline up to 7 words, lede up to 20, expiry hint up to 12, each tip up to 14.
Responsive: One column at every width. The content uses 24px side gutters and a maximum width of 448px; h1 grows from 30px to 36px at 640px. The primary action remains full width, and long disclosure labels wrap beside a non-shrinking chevron.
Layout: A white section has a max-w-3xl 768px shell with 24px gutters and 96px vertical padding. Inside, a centred max-w-md 448px column has a 48px envelope tile, h1, lede, a 32px-separated form and full-width submit. A 24px-separated details row precedes a top-ruled footer, with 24px padding above its password link.
States: Inputs are 40px high with a 1px neutral-300 border, 6px radius and 14px text. The 44px primary action changes neutral-900 to neutral-700 on hover with a 150ms colour transition. Text links change to neutral-600. All controls show a 2px neutral-900 keyboard-focus outline offset 2px. Native details starts closed; opening it reveals three list items and rotates the 20px chevron 180 degrees over 150ms. Its summary has the same visible focus outline as the form controls. No sent or error state is simulated.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│                     Envelope icon                        │
│                  Passwordless headline                   │
│                  Sign-in link explanation                │
│                  Email                                   │
│                  [Email me a sign-in link]               │
│                  Link-expiry note                        │
│                  [Didn't get the email? v]               │
│                  ─────────────────────────               │
│                  [Use a password instead]                │
└──────────────────────────────────────────────────────────┘

View all

Login — Passwordless email link

Pattern notes

Login — Account picker with credential pane

Login — Card over full-bleed media

Login — Centred card

Login — Passwordless email link

Pattern notes

More in Login

Login — Account picker with credential pane

Login — Card over full-bleed media

Login — Centred card