#Wizard

#Import

import { Wizard } from '@dnb/eufemia/extensions/forms'

#Description

Wizard is a set of components for showing forms with a StepIndicator for navigation between several wizard. It also includes components for navigating between wizard.

import { Wizard } from '@dnb/eufemia/extensions/forms'

render(
  <Wizard.Container>
    <Wizard.Step title="Step 1">...</Wizard.Step>
    <Wizard.Step title="Step 2">...</Wizard.Step>
  </Wizard.Container>,
)

#Relevant links

• Source code
• Docs code

#Intro example

#Dynamic steps support

You can use the Wizard.Step component to create dynamic steps. The include and includeWhen properties allow you to show or hide a step based on specific conditions. You find an example in the demo section.

#Summary step

A Wizard needs a summary step at the end. You can use the Wizard.Step component for that, including the Value.SummaryList component:

import { Form, Wizard, Value } from '@dnb/eufemia/extensions/forms'

const MyForm = () => {
  const { summaryTitle } = Form.useLocale().Step

  return (
    <Form.Handler>
      <Wizard.Container>
        <Wizard.Step title="Step 1">...</Wizard.Step>
        <Wizard.Step title="Step 2">...</Wizard.Step>
        <Wizard.Step title={summaryTitle}>
          <Value.SummaryList layout="grid">
            <Value.String label="Label" path="/myValue" />
          </Value.SummaryList>
        </Wizard.Step>
      </Wizard.Container>
    </Form.Handler>
  )
}

#Components

#Container

The Wizard.Container is a container component for multi-page forms including a step indicator.

#Step

Each step should be wrapped with a Wizard.Step component directly inside Wizard.Container.

#Buttons

Wizard.Buttons is a combination of PreviousButton and NextButton for navigating between steps/pages.

#EditButton

Wizard.EditButton is a button to be placed in a summary step.

#NextButton

Wizard.NextButton connects to the Wizard.Context to move the user to the next step when clicked.

#PreviousButton

Wizard.PreviousButton connects to the Wizard.Context to move the user to the previous step when clicked.

#useStep

Wizard.useStep returns Wizard.Context parameters such as totalSteps, activeIndex or a setActiveIndex handler.

#Location Hooks

Is a set of React Hooks that lets you easily hook up your existing router in order to store the current step in the URL query string.