Onboarding Flow Settings Block for React

They are typed example figures, not measurements: STARTERS is the 1,000 new accounts and each step in SAVED has a keep, how many of every 1,000 people who reach it finish it. A step's count is the count before it times its rate, so the bars and the strip are always worked out from the same list, and the line under each figure is built from the same numbers. Replace keep with rates from your own analytics, or compute the counts on your server and pass them in.

Everyone who reaches it goes straight on to the next one, so it has no drop, its bar is left empty and its count reads Off. Every later count is worked out from the step before it that is still on. The first step, creating the account, is always on and always required, and nothing can be moved above it.

It changes where people drop, not how many make it to the end: the rates are multiplied, so the last figure stays the same, while the bars, the biggest drop and the strip's second figure move. Move up and Move down are buttons named for their step ("Move Invite teammates up"); the one that can't act stays focusable and says why in the status line, and after a move focus stays on the button you pressed. There is no drag handle.

A required step has no Skip for now in the drawn screen, and the strip counts how many steps are required. It doesn't change the figures: the demo has no skipping rate, so a required and an optional step with the same rate count the same. If you measure skips, make them part of keep.

Everything. Save keeps the edited steps as the saved ones, in this page only, and Discard puts the saved steps back; the status line counts how many settings differ. To make it real, send the saved list (each step's id, whether it is on, whether it is required and its position) to your API in the save handler, and build your onboarding from the same list. Save and Discard stay in place and focusable while nothing changed, and answer "No changes to save." in words.

Each step is a radio in one group, named by the step and described by its hint, so the arrow keys move the preview between steps; the switch, the toggle and both move buttons are named for their step. The bars are decorative and the same facts are text beside them ("540" and "372 drop here"). The drawn screen is hidden from assistive technology and its caption says the same in words. Below the medium breakpoint the list is a stack of cards and the drawn screen follows it; the save bar stays pinned to the bottom of the screen.