Sign-up — Workspace form with setup summary

Workspace naming and account fields sit beside an ordered setup summary. Use when registration creates a workspace as well as a personal account.

ReactHTML

1440 × 900

Open in new tab

Component.tsx138 lines

export default function SignupWorkspaceSetup() {
  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">
            Create your workspace
          </h1>
          <p className="mt-4 max-w-2xl text-lg text-pretty text-neutral-600">
            Describe what the workspace will hold and who can join.
          </p>
        </div>
        <form className="mt-10 grid items-start gap-10 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
          <div className="space-y-6">
            <div className="min-w-0">
              <label
                htmlFor="signup-workspace-setup-workspace"
                className="block text-sm font-medium"
              >
                Workspace name
              </label>
              <input
                id="signup-workspace-setup-workspace"
                name="workspace"
                type="text"
                required
                aria-describedby="signup-workspace-setup-workspace-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-workspace-setup-workspace-hint"
                className="mt-2 text-sm text-neutral-600"
              >
                Use a name your collaborators will recognize.
              </p>
            </div>
            <div className="min-w-0">
              <label
                htmlFor="signup-workspace-setup-address"
                className="block text-sm font-medium"
              >
                Workspace URL
              </label>
              <input
                id="signup-workspace-setup-address"
                name="address"
                type="text"
                placeholder="workspace-name"
                required
                aria-describedby="signup-workspace-setup-address-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-workspace-setup-address-hint"
                className="mt-2 text-sm text-neutral-600"
              >
                Choose a short address with letters and numbers.
              </p>
            </div>
            <div className="grid gap-6 sm:grid-cols-2">
              <div className="min-w-0">
                <label
                  htmlFor="signup-workspace-setup-name"
                  className="block text-sm font-medium"
                >
                  Your name
                </label>
                <input
                  id="signup-workspace-setup-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-workspace-setup-email"
                  className="block text-sm font-medium"
                >
                  Work email
                </label>
                <input
                  id="signup-workspace-setup-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>
            <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 workspace
            </button>
          </div>
          <aside className="rounded-lg bg-neutral-50 p-6">
            <h2 className="text-lg font-semibold">Setup overview</h2>
            <ol role="list" className="mt-6 space-y-6">
              <li>
                <p className="text-xs font-mono text-neutral-500">01</p>
                <h3 className="mt-1 text-base font-semibold">
                  Name the workspace
                </h3>
                <p className="mt-2 text-sm text-neutral-600">
                  Current step description.
                </p>
              </li>
              <li>
                <p className="text-xs font-mono text-neutral-500">02</p>
                <h3 className="mt-1 text-base font-semibold">
                  Invite collaborators
                </h3>
                <p className="mt-2 text-sm text-neutral-600">
                  Next step description.
                </p>
              </li>
              <li>
                <p className="text-xs font-mono text-neutral-500">03</p>
                <h3 className="mt-1 text-base font-semibold">
                  Add first content
                </h3>
                <p className="mt-2 text-sm text-neutral-600">
                  Final setup description.
                </p>
              </li>
            </ol>
          </aside>
        </form>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when creating a shared workspace during registration. Choose signup-form-aside for a personal account with supporting information. Variations: add a region selector, show an invitation preview, or replace URL with a team identifier.
Hierarchy: The h1 leads into workspace identity, then personal identity and submit. The summary explains what comes next. Headline up to 6 words, lede 18, workspace labels 2 words, step headings 4 and descriptions 8.
Responsive: The setup rail stacks after the form below 1024px. Name/email stack below 640px. Inputs shrink to their columns and hints wrap. The 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 2fr/1fr grid begins at lg with 40px gaps. The left form has 24px vertical field spacing and a nested sm two-column identity row. The p-6 neutral-50 rail lists three 24px-separated setup steps.
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

┌──────────────────────────────────────────────────────────────┐
│Create your workspace                                         │
│Workspace name                          Setup overview        │
│[Workspace name                      ]  01 Name workspace     │
│Workspace URL                           Current step          │
│[workspace-name                      ]  02 Invite people      │
│Your name             Work email        Next step             │
│[Alex Rivera       ]  [Email          ]  03 Add content       │
│[Create workspace]                      Final step            │
└──────────────────────────────────────────────────────────────┘

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 — Workspace form with setup summary

Pattern notes

More in Sign-up

Sign-up — Accept an invitation

Sign-up — Benefits panel beside form

Sign-up — Centred card with providers