# Wizard

> Organism — orn-ui

> ⚠️ Requires <UIProvider>: This component (like every orn-ui component) must render inside a <UIProvider> ancestor, or it throws at runtime. See https://orn-ui-docs.vercel.app/getting-started.md

> Runs on Expo SDK 54, 55, 56 and 57, and on bare React Native >=0.81 with react >=19.1. No native modules — works in Expo Go, no prebuild.

## Installation

Install just this component (copies the source into your project, no npm dependency)
```bash
npx orn-ui add wizard
```

Or install the whole package and import it
```tsx
pnpm add orn-ui
import { Wizard } from 'orn-ui/wizard';
```

Depends on: core (theme + icons), steps, button, transition

## Variants

### A simple 3-step flow — Wizard tracks the current step itself

```tsx
<View style={{ height: 280 }}>
  <Wizard steps={SIMPLE} onFinish={() => {}} />
</View>
```

### orientation="vertical" — the step list runs down the side

```tsx
<View style={{ height: 380 }}>
  <Wizard steps={SIMPLE} orientation="vertical" onFinish={() => {}} />
</View>
```

### completedIndicator="number" — count instead of a check

```tsx
<View style={{ height: 280 }}>
  <Wizard steps={SIMPLE} completedIndicator="number" onFinish={() => {}} />
</View>
```

### A real signup — Next stays disabled until the step is valid

```tsx
<View style={{ height: 340 }}>
  <Wizard steps={validated} nextLabel="Continue" finishLabel="Create account" onFinish={() => {}} />
</View>
```

### Custom labels — rename Back / Next / Finish

```tsx
<View style={{ height: 280 }}>
  <Wizard steps={SIMPLE} backLabel="Previous" nextLabel="Continue" finishLabel="Done" onFinish={() => {}} />
</View>
```

## Full demo source

```tsx
const variants: VariantDef[] = [
  {
    label: 'A simple 3-step flow — Wizard tracks the current step itself',
    content: (
      <View style={{ height: 280 }}>
        <Wizard steps={SIMPLE} onFinish={() => {}} />
      </View>
    ),
  },
  {
    label: 'orientation="vertical" — the step list runs down the side',
    content: (
      <View style={{ height: 380 }}>
        <Wizard steps={SIMPLE} orientation="vertical" onFinish={() => {}} />
      </View>
    ),
  },
  {
    label: 'completedIndicator="number" — count instead of a check',
    content: (
      <View style={{ height: 280 }}>
        <Wizard steps={SIMPLE} completedIndicator="number" onFinish={() => {}} />
      </View>
    ),
  },
  {
    label: 'A real signup — Next stays disabled until the step is valid',
    content: (
      <View style={{ height: 340 }}>
        <Wizard steps={validated} nextLabel="Continue" finishLabel="Create account" onFinish={() => {}} />
      </View>
    ),
  },
  {
    label: 'Custom labels — rename Back / Next / Finish',
    content: (
      <View style={{ height: 280 }}>
        <Wizard steps={SIMPLE} backLabel="Previous" nextLabel="Continue" finishLabel="Done" onFinish={() => {}} />
      </View>
    ),
  },
];
return <VariantList variants={variants} />;
```

## Props

| Name | Type | Default | Description |
|---|---|---|---|
| `steps` | `WizardStep[]` | — | — |
| `current?` | `number` | — | Current step (controlled). If omitted, the Wizard keeps its own state. |
| `onStepChange?` | `(index: number) => void` | — | — |
| `onFinish?` | `() => void` | — | — |
| `orientation?` | `'horizontal' \| 'vertical'` | horizontal | — |
| `completedIndicator?` | `'number' \| 'check'` | check | — |
| `allowStepNavigation?` | `boolean` | true | Allows going back to an already completed step by tapping it in the indicator. |
| `backLabel?` | `string` | Back | — |
| `nextLabel?` | `string` | Next | — |
| `finishLabel?` | `string` | Finish | — |
| `scrollableContent?` | `boolean` | true | The step content scrolls when it does not fit. Set it to false only if a step renders its own virtualized list (nesting a VirtualizedList inside a ScrollView breaks virtualization). |
| `animated?` | `boolean` | true | The step content slides in following the navigation direction. Only opacity and transform, so the animation runs on the native thread. |
| `style?` | `StyleProp<ViewStyle>` | — | — |