Skip to content
Home

Wizard#

Info
Demos
Components
Properties

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 steps. It also includes components for navigating between steps.

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#

Intro example#

Heading

Step 1

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.useTranslation().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#

Wizard.Container#

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

Wizard.Step#

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

Wizard.Buttons#

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

Wizard.EditButton#

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

Wizard.NextButton#

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

Wizard.PreviousButton#

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

Wizard.useStep#

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

Wizard.LocationHooks#

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.

Suggest an edit