# Checkout wizard
Source: https://signy.dev/examples/checkout-wizard/
Four steps, one state machine.
The current step is one signal, and a transition table says which events each step accepts. Next is allowed only when the step is valid, and the steps indicator follows the state.
## Preview
[Open the page on its own](https://signy.dev/examples/checkout-wizard/demo/index.html.md)
## Code
Save it as an `.html` file and open it in a browser. It loads Signy and Iris CSS from the CDN, so there is nothing to install or build.
**Show the full page**
```html
Checkout wizard - Signy example
```
## What it uses
- [Signals](https://signy.dev/documentation/1/reactivity/signals/index.html.md) and [Computed](https://signy.dev/documentation/1/reactivity/computed/index.html.md) guards
- [Switch and Match](https://signy.dev/documentation/1/templates/switch-and-match/index.html.md) for the steps
- The Iris CSS `.steps` component