Sign-up — Interest choices with email footer

Four interest tiles feed into an email registration row. Use to personalize an account before asking for credentials.

ReactHTML

1440 × 900

Component.tsx156 lines

export default function SignupInterestGrid() {
  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 what you want to follow
          </h1>
          <p className="mt-4 max-w-2xl text-lg text-pretty text-neutral-600">
            Select the topics that should shape your first account view.
          </p>
        </div>
        <form className="mt-10">
          <fieldset>
            <legend className="text-base font-semibold">Your interests</legend>
            <div className="mt-4 grid gap-4 sm:grid-cols-2">
              <div className="rounded-lg border border-neutral-200 p-6">
                <div className="flex items-start gap-3">
                  <input
                    id="signup-interest-grid-topic"
                    name="topic"
                    value="topic"
                    type="checkbox"
                    aria-describedby="signup-interest-grid-topic-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"
                  />
                  <div className="min-w-0">
                    <label
                      htmlFor="signup-interest-grid-topic"
                      className="text-sm font-medium"
                    >
                      Topic label
                    </label>
                    <p
                      id="signup-interest-grid-topic-hint"
                      className="mt-1 text-sm text-neutral-600"
                    >
                      Describe this content preference.
                    </p>
                  </div>
                </div>
              </div>
              <div className="rounded-lg border border-neutral-200 p-6">
                <div className="flex items-start gap-3">
                  <input
                    id="signup-interest-grid-category"
                    name="category"
                    value="category"
                    type="checkbox"
                    aria-describedby="signup-interest-grid-category-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"
                  />
                  <div className="min-w-0">
                    <label
                      htmlFor="signup-interest-grid-category"
                      className="text-sm font-medium"
                    >
                      Category label
                    </label>
                    <p
                      id="signup-interest-grid-category-hint"
                      className="mt-1 text-sm text-neutral-600"
                    >
                      Describe this learning preference.
                    </p>
                  </div>
                </div>
              </div>
              <div className="rounded-lg border border-neutral-200 p-6">
                <div className="flex items-start gap-3">
                  <input
                    id="signup-interest-grid-collection"
                    name="collection"
                    value="collection"
                    type="checkbox"
                    aria-describedby="signup-interest-grid-collection-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"
                  />
                  <div className="min-w-0">
                    <label
                      htmlFor="signup-interest-grid-collection"
                      className="text-sm font-medium"
                    >
                      Collection label
                    </label>
                    <p
                      id="signup-interest-grid-collection-hint"
                      className="mt-1 text-sm text-neutral-600"
                    >
                      Describe this update preference.
                    </p>
                  </div>
                </div>
              </div>
              <div className="rounded-lg border border-neutral-200 p-6">
                <div className="flex items-start gap-3">
                  <input
                    id="signup-interest-grid-format"
                    name="format"
                    value="format"
                    type="checkbox"
                    aria-describedby="signup-interest-grid-format-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"
                  />
                  <div className="min-w-0">
                    <label
                      htmlFor="signup-interest-grid-format"
                      className="text-sm font-medium"
                    >
                      Format label
                    </label>
                    <p
                      id="signup-interest-grid-format-hint"
                      className="mt-1 text-sm text-neutral-600"
                    >
                      Describe this delivery preference.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </fieldset>
          <div className="mt-8 grid items-end gap-4 border-t border-neutral-200 pt-8 sm:grid-cols-[minmax(0,1fr)_auto]">
            <div className="min-w-0">
              <label
                htmlFor="signup-interest-grid-email"
                className="block text-sm font-medium"
              >
                Email
              </label>
              <input
                id="signup-interest-grid-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>
            <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"
            >
              Create account
            </button>
          </div>
          <p className="mt-4 text-sm text-neutral-600">
            You can change these interests in account settings.
          </p>
        </form>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when an account begins with followed topics or content subscriptions. Choose a standard credentials form when personalization comes later. Variations: add two topics, group choices by audience, or replace email with a provider action.
Hierarchy: The h1 and interest choices precede the email request. Each tile has a 14px checkbox label and a 6-word hint; h1 up to 9 words, lede 16, interest titles 3 words. The final hint explains reversibility.
Responsive: Interest cards and email/action stack below 640px. Every checkbox remains visible at the start of its card. The heading grows to 36px 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 two-column interest grid starts at sm with 16px gaps and p-6 cards. A top-bordered registration band follows after 32px with 32px upper padding, minmax(0,1fr)/auto columns and 16px gap.
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 what you want to follow                                │
│Your interests                                                │
│[x] Topic label               [ ] Category label              │
│    Topic description             Category description        │
│[ ] Collection label          [ ] Format label                │
│    Collection description        Format description          │
│Email                                                         │
│[name@example.com                     ] [Create account]      │
│Preference change hint                                        │
└──────────────────────────────────────────────────────────────┘

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 — Interest choices with email footer

Pattern notes

More in Sign-up

Sign-up — Accept an invitation

Sign-up — Benefits panel beside form

Sign-up — Centred card with providers