Wizard

Exemplo

// The consumer owns form state; the Wizard is layout-only.
// Derive each step's status from your own validation + visited tracking.
const [active, setActive] = useState("overview");
const [visited, setVisited] = useState(new Set());

const isValid = (id) => /* your validation per step */;
const goToStep = (id) => {
  setVisited((prev) => new Set([...prev, active])); // mark the step you're leaving
  setActive(id);
};

const steps = STEP_CONFIG.map((s) => ({
  ...s, // id, title, subtitle, description, icon
  status: !visited.has(s.id) ? "default" : isValid(s.id) ? "complete" : "error",
  disabled: s.id === "delivery" && !allPreviousValid, // optional: lock a step
}));

<Wizard steps={steps} value={active} onValueChange={goToStep}>
  <WizardSidebar label="Configuração" />
  <WizardPanel>
    <WizardStep stepId="overview">
      <WizardHeader />
      {/* your fields */}
    </WizardStep>
    {/* ...other steps... */}
    <WizardFooter backLabel="Voltar" nextDisabled={!isValid(active)} />
  </WizardPanel>
</Wizard>

Anatomia

• Wizard — root (vertical Radix Tabs); controlled (value/onValueChange) or uncontrolled (defaultValue).
• WizardSidebar — tablist with icon + title + subtitle + status marker. Each step accepts status (complete/error) and disabled (locked until a prerequisite is met).
• WizardPanel — content surface (card).
• WizardStep — a tabpanel; stays mounted while inactive (preserves form state).
• WizardHeader — active step title + description (reads from config by default).
• WizardFooter — Back / Next, with nextDisabled to gate while the step is invalid.