shadcn.io is not affiliated with official shadcn/ui
Goal Setting Onboarding Block for Svelte
A goal question split in two: four goals as radio rows on one side and the plan the pick makes on the other, three things to set up with an Include switch each and one sentence that counts what stays.
Installation
Overview
Turn a stated goal into a setup the user can edit, with this goal question for Svelte with Ark UI. It is a step of Compassby, a cloud deployment platform, as a whole screen: the page's rails and one band, split in two. The first half has the step header (“Step 5 of 6” and a hairline), the heading and four goals as native radio rows with a bar at the start of the picked one: Ship faster, Improve collaboration, Reduce costs and Scale infrastructure. The second half is the plan the goal makes: three things Compassby would set up, each with an Include Switch that starts on, and one sentence that says how many are included and what they are (“2 of 3 included. We'll set up preview deploys and one-click rollbacks.”), rewritten by every pick and every switch. Before a pick the plan shows three quiet empty rows of the same height. Set it up is the one Shine Button, with a ghost Skip for now. On a phone the plan sits under the goals. Nothing is set up.
FAQ
How do I change the goals and their plans?
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.
How is the sentence made?
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.
What if there is no goal, or no switch is on?
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.
How do the switches work?
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.
What stays local in the demo, and how do I wire it?
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.