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 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

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.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>
  )
}