Sign-up — Consent checklist with account strip

A list of individually described agreements precedes a compact identity and registration band. Use when several consent decisions need space and clarity.

ReactHTML

1440 × 900

Open in new tab

Component.tsx152 lines

export default function SignupConsentChecklist() {
  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">
            Review your account preferences
          </h1>
          <p className="mt-4 max-w-2xl text-lg text-pretty text-neutral-600">
            Explain which agreements are required and which are optional.
          </p>
        </div>
        <form className="mt-10">
          <fieldset className="divide-y divide-neutral-200 border-y border-neutral-200">
            <legend className="pb-4 text-base font-semibold">
              Agreements and preferences
            </legend>
            <div className="py-6">
              <div className="flex items-start gap-3">
                <input
                  id="signup-consent-checklist-terms"
                  name="terms"
                  value="terms"
                  type="checkbox"
                  aria-describedby="signup-consent-checklist-terms-hint"
                  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"
                />
                <div className="min-w-0">
                  <label
                    htmlFor="signup-consent-checklist-terms"
                    className="text-sm font-medium"
                  >
                    Accept terms of service
                  </label>
                  <p
                    id="signup-consent-checklist-terms-hint"
                    className="mt-1 text-sm text-neutral-600"
                  >
                    Required agreement for account access.
                  </p>
                </div>
              </div>
            </div>
            <div className="py-6">
              <div className="flex items-start gap-3">
                <input
                  id="signup-consent-checklist-privacy"
                  name="privacy"
                  value="privacy"
                  type="checkbox"
                  aria-describedby="signup-consent-checklist-privacy-hint"
                  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"
                />
                <div className="min-w-0">
                  <label
                    htmlFor="signup-consent-checklist-privacy"
                    className="text-sm font-medium"
                  >
                    Acknowledge privacy policy
                  </label>
                  <p
                    id="signup-consent-checklist-privacy-hint"
                    className="mt-1 text-sm text-neutral-600"
                  >
                    Explain how account information will be used.
                  </p>
                </div>
              </div>
            </div>
            <div className="py-6">
              <div className="flex items-start gap-3">
                <input
                  id="signup-consent-checklist-updates"
                  name="updates"
                  value="updates"
                  type="checkbox"
                  aria-describedby="signup-consent-checklist-updates-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-consent-checklist-updates"
                    className="text-sm font-medium"
                  >
                    Receive product updates
                  </label>
                  <p
                    id="signup-consent-checklist-updates-hint"
                    className="mt-1 text-sm text-neutral-600"
                  >
                    Optional email preference; change it at any time.
                  </p>
                </div>
              </div>
            </div>
          </fieldset>
          <div className="mt-8 grid items-end gap-4 rounded-lg bg-neutral-50 p-6 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]">
            <div className="min-w-0">
              <label
                htmlFor="signup-consent-checklist-name"
                className="block text-sm font-medium"
              >
                Name
              </label>
              <input
                id="signup-consent-checklist-name"
                name="name"
                type="text"
                defaultValue="Alex Rivera"
                required
                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-consent-checklist-email"
                className="block text-sm font-medium"
              >
                Email
              </label>
              <input
                id="signup-consent-checklist-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">
            <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"
            >
              Read full policies
            </a>
          </p>
        </form>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when registration has several independently described agreements. Choose a short standard signup form for one required agreement. Variations: add a data residency agreement, remove optional marketing, or move policy links into each description.
Hierarchy: The h1 explains consent, then each 14px checkbox label and associated description is read before identity fields and submit. Headline up to 7 words, lede 16, row labels 5 and descriptions 12. Optional preference is named explicitly.
Responsive: Under 768px the identity band becomes one column. Agreement descriptions wrap beneath their labels while inputs remain at the left. Title increases at sm.
Layout: White section with a 1152px max-w-6xl container, 24px side gutters and 64px vertical padding, increasing to 96px at 640px. Three agreement rows have 24px vertical padding, 12px input/copy gaps and horizontal separators. A p-6 neutral-50 identity band follows after 32px, with 1fr/1fr/auto columns at md.
States: Native checkboxes toggle independently and display keyboard focus. Required agreements must be checked before submitting; marketing remains optional. Policy links use underlined hover states. Add host application account creation and agreement recording.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│Review your account preferences                               │
│Agreements and preferences                                    │
│[ ] Accept terms of service         Required description      │
│[ ] Acknowledge privacy policy      Data-use description      │
│[ ] Receive updates                 Optional description      │
│Name                  Email                                   │
│[Alex Rivera       ]  [Email              ] [Create account]  │
│[Read full policies]                                          │
└──────────────────────────────────────────────────────────────┘

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 — Consent checklist with account strip

Pattern notes

More in Sign-up

Sign-up — Accept an invitation

Sign-up — Benefits panel beside form

Sign-up — Centred card with providers