DocsComponentsAdvanced

Wizard

import { Wizard } from "@grassroot/ui-react/advanced";
 
const steps = [
  { label: "Account", content: <div>AccountForm</div> },
  { label: "Workspace", content: <div>WorkspaceForm</div> },
  { label: "Review", content: <div>ReviewSummary</div> },
];
 
<Wizard steps={steps} />

No translated snippet for this adapter yet.

import { Wizard } from "@grassroot/ui-solid";
 
const steps = [
  { label: "Account", content: <div>AccountForm</div> },
  { label: "Workspace", content: <div>WorkspaceForm</div> },
  { label: "Review", content: <div>ReviewSummary</div> },
];
 
export function Example() {
  return (
    <>
      <Wizard steps={steps} />
    </>
  );
}

Installation

pnpmnpmyarnbun

bash

pnpm dlx grassroot add ui/wizard

bash

npx grassroot@latest add ui/wizard

bash

yarn dlx grassroot add ui/wizard

bash

bunx grassroot add ui/wizard

API Reference

`WizardProps`
Prop	Type	Default
`steps`required	`WizardStep[]`	—
`step`Controlled current index. Pair with `onStepChange`.	`number \| undefined`	—
`defaultStep`Uncontrolled initial index.	`number \| undefined`	`0`
`onStepChange`Fired with the new index when the step changes.	`((next: number) => void) \| undefined`	—
`onFinish`Fired when Next is pressed on the last step.	`(() => void) \| undefined`	—
`backLabel`Back button label.	`string \| undefined`	`"Back"`