## Examples

### Basic


import WizardBasic from "./WizardBasic.tsx?raw"

<LiveExample src={WizardBasic} />

### Focus content on next/back

To focus the main content element of the `Wizard`, pass in the `shouldFocusContent` property. It is recommended that this is passed in so that users can navigate through a `WizardStep` content in order.


import WizardFocusOnNextBack from "./WizardFocusOnNextBack.tsx?raw"

<LiveExample src={WizardFocusOnNextBack} />

### Basic with disabled steps


import WizardBasicDisabledSteps from "./WizardBasicDisabledSteps.tsx?raw"

<LiveExample src={WizardBasicDisabledSteps} />

### Anchors for nav items


import WizardWithNavAnchors from "./WizardWithNavAnchors.tsx?raw"

<LiveExample src={WizardWithNavAnchors} />

### Incrementally enabled steps


import WizardStepVisitRequired from "./WizardStepVisitRequired.tsx?raw"

<LiveExample src={WizardStepVisitRequired} />

### Expandable steps


import WizardExpandableSteps from "./WizardExpandableSteps.tsx?raw"

<LiveExample src={WizardExpandableSteps} />

### Progress after submission


import WizardWithSubmitProgress from "./WizardWithSubmitProgress.tsx?raw"

<LiveExample src={WizardWithSubmitProgress} />

### Enabled on form validation


import WizardEnabledOnFormValidation from "./WizardEnabledOnFormValidation.tsx?raw"

<LiveExample src={WizardEnabledOnFormValidation} />

### Validate on button press


import WizardValidateOnButtonPress from "./WizardValidateOnButtonPress.tsx?raw"

<LiveExample src={WizardValidateOnButtonPress} />

### Progressive steps


import WizardProgressiveSteps from "./WizardProgressiveSteps.tsx?raw"

<LiveExample src={WizardProgressiveSteps} />

### Get current step


import WizardGetCurrentStep from "./WizardGetCurrentStep.tsx?raw"

<LiveExample src={WizardGetCurrentStep} />

### Within modal


import WizardWithinModal from "./WizardWithinModal.tsx?raw"

<LiveExample src={WizardWithinModal} />

### Step drawer content


import WizardStepDrawerContent from "./WizardStepDrawerContent.tsx?raw"

<LiveExample src={WizardStepDrawerContent} />

### Custom navigation


import WizardWithCustomNav from "./WizardWithCustomNav.tsx?raw"

<LiveExample src={WizardWithCustomNav} />

### Header


import WizardWithHeader from "./WizardWithHeader.tsx?raw"

<LiveExample src={WizardWithHeader} />

### Custom footer


import WizardWithCustomFooter from "./WizardWithCustomFooter.tsx?raw"

<LiveExample src={WizardWithCustomFooter} />

### Custom navigation item


import WizardWithCustomNavItem from "./WizardWithCustomNavItem.tsx?raw"

<LiveExample src={WizardWithCustomNavItem} />

### Toggle step visibility


import WizardToggleStepVisibility from "./WizardToggleStepVisibility.tsx?raw"

<LiveExample src={WizardToggleStepVisibility} />

### Step status


import WizardStepStatus from "./WizardStepStatus.tsx?raw"

<LiveExample src={WizardStepStatus} />

## Hooks

### useWizardContext

Used to access any property of [WizardContext](#wizardcontextprops):

```

const StepContent = () => {
  const { activeStep } = useWizardContext();
  return <>This is the current step: {activeStep}</>;
}
```

### useWizardFooter

Used to set a unique footer for the wizard on any given step.

```

const StepContent = () => {
  useWizardFooter(<>Some footer</>);
  return <>Step content</>;
}
```