Sign-up — Accept an invitation

A compact invitation card that identifies the workspace and role above a read-only invited email. Use when account creation begins from a specific invitation.

ReactHTML

1440 × 900

Open in new tab

Component.tsx29 lines

export default function SignupInviteAccept() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div className="mx-auto max-w-md rounded-lg border border-neutral-200 bg-white p-6 sm:p-8">
          <header className="flex items-start gap-4 border-b border-neutral-200 pb-6">
            <span aria-hidden="true" className="flex size-12 shrink-0 items-center justify-center rounded-md bg-neutral-100 text-sm font-medium text-neutral-900">WN</span>
            <div>
              <h1 className="text-lg font-semibold">Alex Rivera invited you to join Workspace name</h1>
              <p className="mt-2 text-sm text-neutral-500">Role: Member</p>
            </div>
          </header>
          <form className="mt-6 grid gap-5">
            <div>
              <label htmlFor="signup-invite-accept-email" className="block text-sm font-medium text-neutral-900">Invited email</label>
              <input id="signup-invite-accept-email" name="email" type="email" autoComplete="email" defaultValue="name@example.com" readOnly aria-describedby="signup-invite-accept-email-hint" 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 read-only:bg-neutral-50" />
              <p id="signup-invite-accept-email-hint" className="mt-2 text-sm text-neutral-500">This invitation is tied to this address.</p>
            </div>
            <div><label htmlFor="signup-invite-accept-name" className="block text-sm font-medium text-neutral-900">Full name</label><input id="signup-invite-accept-name" name="name" type="text" autoComplete="name" required placeholder="Full name" 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>
            <div><label htmlFor="signup-invite-accept-password" className="block text-sm font-medium text-neutral-900">Password</label><input id="signup-invite-accept-password" name="password" type="password" autoComplete="new-password" aria-describedby="signup-invite-accept-password-hint" required minLength={12} 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" /><p id="signup-invite-accept-password-hint" className="mt-2 text-sm text-neutral-500">Password rules and minimum length.</p></div>
            <label className="flex items-start gap-3 text-sm text-neutral-600"><input type="checkbox" name="terms" required className="mt-1 size-4 shrink-0 accent-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" /><span>I agree to the <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">Terms</a> and <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">Privacy policy</a>.</span></label>
            <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">Accept and join</button>
          </form>
          <p className="mt-6 text-sm text-neutral-500">Not you? <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 another account</a></p>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for joining a workspace through an invitation tied to an email address. Pick signup-split-benefits for creating a new workspace or signup-centered-social for open registration. Variations: change the assigned role, add invitation expiry information, or show a different inviter name.
Hierarchy: The 18px semibold h1 names Alex Rivera and Workspace name; a 14px line identifies the member role. Invited email is read-only with a neutral-50 fill and explanatory hint. Full name, Password with a rules hint, required terms and the full-width Accept and join action follow. A 14px account-switch prompt closes the card. Slots: workspace name up to 4 words, role up to 3, password hint up to 12.
Responsive: One column at every width; the card fills the 24px gutters below 448px. The invitation title wraps beside the fixed 48px tile. At 640px vertical padding becomes 96px and card padding 32px. Field and submit widths do not change.
Layout: A white section has a max-w-6xl 1152px shell with 24px gutters and 64px vertical padding, 96px from 640px. A centred max-w-md 448px card uses 24px padding, 32px from 640px, a 1px neutral-200 border and 8px radius. Its header has a non-shrinking 48px workspace tile beside invitation text with a 16px gap. A bottom hairline and 24px padding separate the header from a form with 20px gaps.
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. Invited email remains focusable and read-only, with read-only neutral-50 fill and a linked hint. Password requires at least 12 characters. Terms is a native required checkbox. The account-switch link is available; no expired invitation state is shown.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│       ┌───────────────────────────────────────────┐      │
│       │ Tile  Alex Rivera invited you             │      │
│       │       Workspace name / Member role        │      │
│       ├───────────────────────────────────────────┤      │
│       │ Invited email [read-only]                 │      │
│       │ Full name                                 │      │
│       │ Password / Rules hint                     │      │
│       │ [ ] Accept terms                          │      │
│       │ [Accept and join                        ] │      │
│       │ Not you? [Use another account]            │      │
│       └───────────────────────────────────────────┘      │
└──────────────────────────────────────────────────────────┘

View all

Sign-up — Benefits panel beside form
Layout tags: split,form,icons
Sign-up — Centred card with providers
Layout tags: centered,form,compact
Sign-up — Consent checklist with account strip
Layout tags: stacked,list,form

Sign-up — Accept an invitation

Pattern notes

More in Sign-up

Sign-up — Benefits panel beside form

Sign-up — Centred card with providers

Sign-up — Consent checklist with account strip