Forms · Page template

Wizard

Multi-step form with progress, validated transitions, and a review step.

app.example.com/onboarding/step-2
What it is

When to reach for it.

A guided multi-step form. Step indicator at the top with a clear current/done/upcoming state. Each step validates before letting the user advance. A final review step shows everything before the commit so the user has a chance to back up.

  • Onboarding flows — 'set up your workspace' across 3–6 steps.
  • Complex configurations where the user benefits from one-thing-at-a-time.
  • Form flows where conditional branching makes a single-screen form too overwhelming.
Structure

What's in the template.

Each section pre-wired with the right CleenUI primitives. Swap, remove, or extend any of them — the template is a starting point, not a constraint.

  1. 1

    Step indicator

    Linear progress across N steps; current step bold, done steps checked.

    Steps
  2. 2

    Step body

    The fields for the current step; renders one step at a time.

    FormInputSelectToggle
  3. 3

    Navigation

    Back (ghost) + Next (primary). Next disables until validation passes.

    Button
  4. 4

    Review step

    Final step — a summary of all answers + Confirm + Edit-this-section affordances.

    CardButton
Components used

Everything this template touches.

All of these are in the catalog — the Builder skill imports them automatically. Each chip links to that component's page.

StepsFormInputSelectToggleButtonCard
What you customize

Substitutions.

When the Builder skill scaffolds this template for you, these are the fields it asks about — or infers from your prompt.

FieldExampleWhere it appears
stepCount5Step indicator
stepLabelsWorkspace · Team · Integrations · Branding · ReviewStep indicator labels
commitLabelCreate workspaceFinal step's primary action button
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Ask your AI agent to scaffold this template in your project — the Builder skill knows the Wizard layout and the components it uses.

Get started

Get started with CleenUI.

Two paths to your first component. Pick the one that fits how your team builds.

Path A · Recommended

With AI agent skills

One prompt to your AI tool. The Setup skill handles dependencies, design tokens, build config, and component registration — all without leaving your editor.

Path B · Manual

With npm

The classic flow. Install the package, import the styles, drop in your first component. No agents required — same end result.