Decision Tree Wizard
Stepper wizard where answers in step N change the options or the flow in step N+1. Pattern for auto-deriving complex configurations from simple user decisions.
Live Preview
- 1Fuel Energy source configuration
- 2Heat meters Check installation
- 3Recommendation System suggestion
Which fuel configuration?
Features
- Dynamically visible steps via $derived and a skipIf predicate
- Auto-derived recommendation in the review step
- Answer path determines the options available in the next step
- Back navigation always allowed, forward only once the current answer is given
- No URL-state persistence — the wizard is ephemeral
Code skeleton
DecisionTreeWizard.svelte
Best Practices
Don't put answers in URL params
Wizard state is usually ephemeral — URL state would affect bookmarks or refreshes in unexpected ways. Only opt in with `?step=2` or similar when explicitly desired.
$derived instead of imperative skip logic
The steps array is filtered at render time via `$derived.by`. As soon as an answer changes, the next step is (de)activated automatically — no manual `goto()` or event listeners.
Auto-recommendation in the review
The last step shows not just the answers but also the derived recommendation. Optionally the user can override it — add a "Choose a different one?" toggle for that.
Back navigation always allowed
Forward may be locked while the current answer is missing. Back must never block — otherwise the user can't escape a dead end.