@neo4j-ndl/react/skills/ndl-react/components/wizard.md

React implementation of Neo4j Design System

# Wizard

Import: `import { Wizard } from '@neo4j-ndl/react'`

## Props

### Wizard

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `activeStepIndex` | `number` | ✅ |  | Zero-based index of the active step |
| `alignment` | `'middle' \| 'top'` |  | `middle` | Alignment of labels/content, is set to `middle` for horizontal orientation and can be set to `top` or `middle` for vertical orientation and is not applicable when `orientation` is undefined |
| `as` | `ElementType<any, keyof IntrinsicElements>` |  |  | An override of the default HTML tag of the root of the component. Can also be another React component. |
| `orientation` | `'horizontal' \| 'vertical'` |  | `horizontal` | Layout orientation of the wizard |
| `ref` | `any` |  |  | A ref to apply to the root element. |
| `size` | `'large' \| 'small'` |  | `large` | Visual size of the wizard |
| `steps` | `Step[]` | ✅ |  | Steps to display in the wizard |

Where type `Step` is defined as: `{ content: string | React.JSX.Element; status?: 'default' | 'error' }`. To highlight a step as error, set the `status` to `error`.

## Examples

### Error State

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Wizard } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <Wizard
      orientation="horizontal"
      activeStepIndex={1}
      steps={[
        { content: 'Step 1' },
        { content: 'Step 2', status: 'error' },
        { content: 'Step 3' },
        { content: 'Step 4' },
      ]}
    />
  );
};

export default Component;
```

### Horizontal

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Wizard } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <Wizard
      orientation="horizontal"
      alignment="middle"
      activeStepIndex={1}
      steps={[
        { content: 'Step 1' },
        { content: 'Step 2' },
        { content: 'Step 3' },
        { content: 'Step 4' },
      ]}
    />
  );
};

export default Component;
```

### Horizontal Small

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Wizard } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <Wizard
      orientation="horizontal"
      size="small"
      alignment="middle"
      activeStepIndex={1}
      steps={[
        { content: 'Step 1' },
        { content: 'Step 2' },
        { content: 'Step 3' },
        { content: 'Step 4' },
      ]}
    />
  );
};

export default Component;
```

### Vertical

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Wizard } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <Wizard
      orientation="vertical"
      alignment="middle"
      activeStepIndex={1}
      steps={[
        { content: 'Step 1' },
        { content: 'Step 2' },
        { content: 'Step 3' },
        { content: 'Step 4' },
      ]}
    />
  );
};

export default Component;
```

### Vertical Small

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Wizard } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <Wizard
      orientation="vertical"
      size="small"
      alignment="middle"
      activeStepIndex={1}
      steps={[
        { content: 'Step 1' },
        { content: 'Step 2' },
        { content: 'Step 3' },
        { content: 'Step 4' },
      ]}
    />
  );
};

export default Component;
```