A numbered horizontal track showing the user where they are in a multi-step flow — checkout, signup, onboarding. Past steps mark "done"; current step highlights.
A row of numbered circles connected by lines, each representing one step of a process. Completed steps show a checkmark and a green connector; the current step is highlighted; future steps are muted. Standard pattern on checkouts (cart → shipping → payment → confirm), multi-step signup forms, and onboarding wizards. The pattern reduces friction by telling the user exactly how many more steps remain.
A grid of N equal columns, each a step element with a circle + label. Each step uses position: relative with a ::before pseudo-element that draws the connector line to the previous step. State classes — .done (checkmark + green), .current (filled dark + glow ring), default (outlined gray). The form panel below swaps via JS as the user clicks Next; only the active body has .on class. Validation should block "Next" until the current step's fields are filled.
Click "Next" to advance — past steps get checkmarks, the connector goes green.
Just an email and a password to start.
You can change this later in settings.
Start free — upgrade any time. We'll never auto-charge.
Your workspace is ready. Click "Open workspace" to begin.
Build a 4-step signup stepper. Top: a stepper bar with 4 equal columns, each containing a 36px circle (with the step number AND a checkmark SVG inside, switched via opacity), and a small uppercase mono label below ("Account / Workspace / Plan / Done"). Connector lines drawn via ::before pseudo-elements on each step (except the first) connecting back to the previous circle. State classes: .done (green background, green border, checkmark visible, connector green, label green); .current (dark background, glow ring via box-shadow 0 0 0 6px alpha, slight scale-up, dark label); default (white background, gray border, gray label). Below: a white card panel with the active step body. Each step body has its own form fields (email/password, workspace name/industry, plan select, etc.) and only one body has .on class at a time — others display:none. Bottom of card: Back + Next buttons. On click Next: validate current step's required fields, mark current as .done, set next step to .current, swap which body is visible with a fade-up. Back disabled at step 1, Next becomes "Open workspace" at step 4.