#StepsLayout

StepsLayout is a wrapper component for showing forms with a StepIndicator for navigation between several steps. It also includes components for navigating between steps.

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

#StepsLayout

The container component for layout with separate steps and step indicator. Adds the required context to make step navigation work.

#Step

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

#NextButton

StepsLayout.NextButton connects to the StepsContext to move the user to the next step when clicked.

#PreviousButton

StepsLayout.PreviousButton connects to the StepsContext to move the user to the previous step when clicked.

#Buttons

StepsLayout.Buttons Is a composition for a row containing both PreviousButton and NextButton.

#Demo

<StepsLayout>
  <StepsLayout.Step title="Step 1">
    <div>
      <P>Step 1 contents</P>
      <StepsLayout.NextButton />
    </div>
  </StepsLayout.Step>
  <StepsLayout.Step>
    <div>
      <P>Step 2 contents</P>
      <Layout.ButtonRow>
        <StepsLayout.PreviousButton />
        <StepsLayout.NextButton />
      </Layout.ButtonRow>
    </div>
  </StepsLayout.Step>
  <StepsLayout.Step>
    <div>
      <P>Step 3 contents</P>
      <StepsLayout.PreviousButton />
    </div>
  </StepsLayout.Step>
</StepsLayout>