Goal Setting Onboarding Block for React

Edit GOALS. Each goal has an id, a title, a hint, plan (how the heading and sentence say it: “shipping faster”) and exactly three items, each with an id, a title, a detail and said, the lower-case name the sentence joins with “and”. Keep three items per goal so the plan never changes height; a switch's state is kept per item, so going back to a goal finds its switches as you left them.

From the picked goal and the switches that are on, with Intl.ListFormat: “3 of 3 included. We'll set up sleeping previews, budget alerts and trim suggestions.” Turn one off and the count and the list follow; turn them all off and it says nothing would be set up yet. It is the page's one polite status, so each change is announced once.

Set it up stays in the tab order and looks quiet until a goal is picked. Pressing it without a goal says “Pick a goal to continue.” under the goals and puts focus on the first one; with every switch off it says “Include at least one thing.” and puts focus on the first switch. Both lines are always reserved, so nothing moves.

Each is named “Include” and the item's title, so a screen reader hears the item and the choice together, and they are drawn in the foreground color so only Set it up carries the primary color. Space turns the focused switch on or off.

Everything: Set it up says it was saved in this demo and nothing is deployed. In your app send the goal and the included item ids to your server where submit says so, create what the response confirms, and keep the sentence as the receipt. Skip for now says it was skipped and keeps the choices.

The goals come first with only their names (the lines stay for screen readers), the plan follows under a rule, and Set it up pins to the foot of the screen with Skip for now beside it, so the primary action is in reach at every scroll position.