Skip to content

Demos#

Fornavn
John

const Step = ({ title }) => {
  return (
    <Wizard.Step aria-label={`Edit button wizard: ${title}`} title={title}>
      <Form.Card>
        <P>Contents</P>
      </Form.Card>

      <Wizard.Buttons />
    </Wizard.Step>
  )
}
const Summary = () => {
  const { summaryTitle } = Form.useTranslation().Step
  return (
    <Wizard.Step
      aria-label={`Edit button wizard: ${summaryTitle}`}
      title={summaryTitle}
    >
      <Form.Card>
        <Value.SummaryList>
          <Value.Name.First path="/firstName" />
        </Value.SummaryList>

        <Wizard.EditButton toStep={0} />
      </Form.Card>
    </Wizard.Step>
  )
}
render(
  <Form.Handler
    data={{
      firstName: 'John',
    }}
  >
    <Provider
      StepIndicator={{
        overviewTitle: 'Edit button wizard steps',
      }}
    >
      <Wizard.Container initialActiveIndex={1}>
        <Step title="Step" />
        <Summary />
      </Wizard.Container>
    </Provider>
  </Form.Handler>
)
Suggest an edit