Sign-up — Purpose rail beside credentials

A vertical account-purpose selector sits beside a bordered credential pane. Use to adapt onboarding around the intended account role.

ReactHTML

1440 × 900

Open in new tab

Component.tsx147 lines

export default function SignupRoleSelection() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div>
          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
            Choose how you will use your account
          </h1>
          <p className="mt-4 max-w-2xl text-lg text-pretty text-neutral-600">
            A short explanation of how the selected purpose shapes onboarding.
          </p>
        </div>
        <form className="mt-10 grid items-start gap-10 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.4fr)]">
          <fieldset>
            <legend className="mb-4 text-base font-semibold">
              Account purpose
            </legend>
            <div>
              <label className="flex cursor-pointer items-start gap-4 border-t border-neutral-200 py-6">
                <input
                  type="radio"
                  name="role"
                  value="personal"
                  aria-describedby="signup-role-selection-personal-hint"
                  defaultChecked
                  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 className="min-w-0">
                  <span className="block text-base font-semibold">
                    Personal use
                  </span>
                  <span
                    id="signup-role-selection-personal-hint"
                    className="mt-2 block text-sm text-neutral-600"
                  >
                    Short benefit for an individual account.
                  </span>
                </span>
              </label>
              <label className="flex cursor-pointer items-start gap-4 border-t border-neutral-200 py-6">
                <input
                  type="radio"
                  name="role"
                  value="team"
                  aria-describedby="signup-role-selection-team-hint"
                  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 className="min-w-0">
                  <span className="block text-base font-semibold">
                    Team use
                  </span>
                  <span
                    id="signup-role-selection-team-hint"
                    className="mt-2 block text-sm text-neutral-600"
                  >
                    Short benefit for a shared workspace.
                  </span>
                </span>
              </label>
              <label className="flex cursor-pointer items-start gap-4 border-t border-neutral-200 py-6">
                <input
                  type="radio"
                  name="role"
                  value="organization"
                  aria-describedby="signup-role-selection-organization-hint"
                  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 className="min-w-0">
                  <span className="block text-base font-semibold">
                    Organization use
                  </span>
                  <span
                    id="signup-role-selection-organization-hint"
                    className="mt-2 block text-sm text-neutral-600"
                  >
                    Short benefit for managed access.
                  </span>
                </span>
              </label>
            </div>
          </fieldset>
          <div className="min-w-0 rounded-lg border border-neutral-200 bg-white p-6">
            <h2 className="text-lg font-semibold">Create your account</h2>
            <div className="mt-6 space-y-6">
              <div className="min-w-0">
                <label
                  htmlFor="signup-role-selection-email"
                  className="block text-sm font-medium"
                >
                  Email
                </label>
                <input
                  id="signup-role-selection-email"
                  name="email"
                  type="email"
                  placeholder="name@example.com"
                  required
                  autoComplete="email"
                  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"
                />
              </div>
              <div className="min-w-0">
                <label
                  htmlFor="signup-role-selection-password"
                  className="block text-sm font-medium"
                >
                  Password
                </label>
                <input
                  id="signup-role-selection-password"
                  name="password"
                  type="password"
                  required
                  autoComplete="new-password"
                  aria-describedby="signup-role-selection-password-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="signup-role-selection-password-hint"
                  className="mt-2 text-sm text-neutral-600"
                >
                  Use at least 12 characters.
                </p>
              </div>
            </div>
            <div className="mt-8">
              <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"
              >
                Create account
              </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"
              >
                Already have an account?
              </a>
            </p>
          </div>
        </form>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when account purpose affects subsequent onboarding. Choose signup-plan-choice for a horizontal price comparison before registration. Variations: use two purposes, show an organization-access hint, or replace the password with an invitation code.
Hierarchy: The 30px h1 leads to account purpose, then the credential card title, email, password and Create account. Purpose titles allow 3 words, descriptions 9, headline 11 and lede 16. Each radio is described by its own purpose hint.
Responsive: Below 1024px the vertical purpose selector precedes the credential card. Both stay in one column on mobile; options retain their horizontal radio/copy relationship. Heading and section padding increase at sm.
Layout: White section with a 1152px max-w-6xl container, 24px side gutters and 64px vertical padding, increasing to 96px at 640px. A 1fr/1.4fr grid starts at lg with 40px gaps. The left fieldset has three vertically divided purpose options with 24px vertical padding and 16px input/copy gaps. The p-6 credential card on the right spaces fields by 24px and ends in a full-width primary action.
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

┌──────────────────────────────────────────────────────────────┐
│Choose how you will use your account                          │
│Account purpose                 Create your account           │
│(o) Personal use                Email                         │
│    Purpose description         [name@example.com         ]   │
│( ) Team use                    Password                      │
│    Purpose description         [Password                 ]   │
│( ) Organization use            Password hint                 │
│    Purpose description         [Create account]              │
│                                [Already a member?]           │
└──────────────────────────────────────────────────────────────┘

View all

Sign-up — Accept an invitation
Layout tags: centered,form,compact
Sign-up — Benefits panel beside form
Layout tags: split,form,icons
Sign-up — Centred card with providers
Layout tags: centered,form,compact

Sign-up — Purpose rail beside credentials

Pattern notes

More in Sign-up

Sign-up — Accept an invitation

Sign-up — Benefits panel beside form

Sign-up — Centred card with providers