---
title: Wizard
category: General
---

```jsx live
function Step({ name }) {
  return (
    <Wizard.Step name={name}>
      {(wizard) => (
        <Box padding={4}>
          <Input
            value={wizard.payload[name]}
            placeholder={name}
            onChange={(event) => {
              wizard.setPayload({
                [name]: event.target.value,
              })
            }}
          />
        </Box>
      )}
    </Wizard.Step>
  )
}

function sendPayload(payload, complete) {
  new Promise((resolve, reject) => {
    console.log('Sending payload...', payload)
    setTimeout(() => {
      if (Math.random() > 0.5) {
        resolve()
      } else {
        reject()
      }
      complete()
    }, 2500)
  })
    .then(() => {
      console.log('Payload was successful')
    })
    .catch(() => {
      console.log('Payload failed to send')
    })
}

render(
  <Wizard
    width="100%"
    padding={8}
    nextButtonTitle={({ activeStepIndex, steps, totalSteps }) =>
      activeStepIndex >= totalSteps - 1
        ? 'Finish'
        : `Next: ${steps[activeStepIndex + 1].name}`
    }
    initialPayload={{ 'Step 1': 'Initial wizard content' }}
    onSubmit={sendPayload}
  >
    <Step name="Step 1" />
    <Step name="Step 2" />
    <Step name="Step 3" />
  </Wizard>
)
```

```jsx live
render(
  <Wizard
    buttonProps={{ size: 'sm' }}
    cancelButtonProps={{ theme: 'error', variant: 'fill' }}
    backButtonProps={{ theme: 'dark', variant: 'outline' }}
    footerProps={{ backgroundColor: 'grey-2' }}
    nextButtonProps={{ iconRight: { name: 'caret-right' } }}
    onCancel={() => console.log('cancel')}
    onSubmit={() => console.log('submit')}
    padding={8}
    renderProgress={({ activeStepIndex, totalSteps }) => {
      const value = ((activeStepIndex + 1) / totalSteps) * 100

      return (
        <Box padding={4} width="100%">
          <Progress value={value} />
        </Box>
      )
    }}
    width="100%"
  >
    {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].map((n) => (
      <Wizard.Step name={`Step ${n}`}>
        {() => (
          <Box padding={4}>
            <Text align="center">This is step number {n}.</Text>
          </Box>
        )}
      </Wizard.Step>
    ))}
  </Wizard>
)
```