#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">
    <Form.MainHeading>Step 1</Form.MainHeading>
    <Card>
      <P>Step 1 contents</P>
    </Card>
    <StepsLayout.NextButton />
  </StepsLayout.Step>
  <StepsLayout.Step title="Step 2">
    <P>Step 2 contents</P>
    <Form.ButtonRow>
      <StepsLayout.PreviousButton />
      <StepsLayout.NextButton />
    </Form.ButtonRow>
  </StepsLayout.Step>
  <StepsLayout.Step>
    <P>Step 3 contents</P>
    <StepsLayout.PreviousButton />
  </StepsLayout.Step>
</StepsLayout>