Multi-Step Wizards (ui.steps)
Guide users through multi-stage setup flows with back navigation, state preservation, and final value collation.
ui.steps() orchestrates sequential dialog prompts, maintaining progress dots, previous/next navigation buttons, and returning an aggregated array of answers.
const wizard = await ui.steps([ { title: 'Step 1 of 3: Workspace', text: 'What should we call your team workspace?', input: 'text', placeholder: 'Acme Design', }, { title: 'Step 2 of 3: Plan', text: 'Select your team billing tier:', input: 'select', options: { starter: 'Starter (Free)', pro: 'Pro ($20/mo)', enterprise: 'Enterprise' }, }, { title: 'Step 3 of 3: Region', text: 'Primary database deployment zone:', input: 'select', options: { 'us-east': 'US East (N. Virginia)', 'eu-west': 'EU West (Frankfurt)' }, }, ]);
if (wizard.isConfirmed) {
const [workspaceName, planTier, region] = wizard.value as string[];
toast.success(Workspace "${workspaceName}" ready on ${region}!);
}
`
Want to test these options live?
Launch the interactive playground to experiment with themes, positions, and live generators.