# Flux 2.0 — Stepper and wizard Numbered steps that show progress through a task, and the wizard recipe that validates each one. Reference: https://flux.kaptio.com/components/stepper/ Requires: https://flux.kaptio.com/tokens/v2/flux.css and flux-components.css ## Use it when A Stepper shows where someone is in a task with a fixed order: which steps are done, which is current and which remain. The wizard recipe pairs it with one form section per step, validates each step with the platform’s constraint checks before the next one opens, moves focus to the new step’s heading, and ends on a review that reads back what was entered. Numbering is the meaning here, so the markers are numbered. ## Do not use it when Not for a form short enough to fit on one screen. Not for steps that can be done in any order; use sections or Tabs. Not for showing location in a hierarchy; use Breadcrumbs. ## Markup ### Progress
  1. Completed: Lead traveller
  2. Completed: Departure
  3. 3Rooms
  4. 4Review
### With an error
  1. Completed: Lead traveller
  2. Needs attention: Departure
  3. 3Rooms
  4. 4Review
### Wizard

New group booking

  1. 1Lead traveller
  2. 2Departure
  3. 3Review

Lead traveller

## API - flux-stepper (class): On the ol. Label it for the task. - flux-stepper__step (class): On each li. - flux-stepper__marker (class): The number, or a tick or alert icon with hidden text. - flux-stepper__label (class): The step name. Below 48rem only the current step keeps its visible label. - aria-current="step" (attribute): On the current step. - data-state (attribute): "complete" or "error" on a step that is not current. - data-flux-wizard (attribute): On the form. Wires the steps, the stepper, validation and the review. - flux-wizard__step (class): On each section. Hide all but the first in the markup. - flux-wizard__title (class): The step heading. Receives focus when its step opens. - flux-wizard__actions (class): The action row. - data-flux-wizard-back | -next | -submit (attribute): On the three buttons. The script shows the right ones for each step. - data-error (attribute): On a flux-field or choice group: the message shown when its control is invalid. Without it the browser’s message is used. - data-flux-review (attribute): On an element in the review: the name of the field whose value it shows. For radios, the checked option’s label. - flux-wizard-complete (element): Cancelable event dispatched on the form when every step is valid and it is submitted. Call preventDefault to submit by script instead. ## Accessibility - The stepper is a list, so its length and each position are announced; aria-current marks the current step. - Completed and error markers carry hidden text, so the icon and colour are not the only signal. - Moving to a step focuses its heading, so screen reader users hear where they are. - An invalid step keeps focus on its first invalid field, with the message bound to it. ## Keyboard - Tab: Moves through the fields of the current step, then Back and Next. - Enter: In a field, submits the form, which validates every step and opens the first one with a problem. ## Tokens - --flux-stepper-marker-size | -gap - --flux-stepper-connector | -connector-complete - --flux-stepper-marker-border | -marker-text - --flux-stepper-marker-current-bg | -marker-current-text - --flux-stepper-marker-complete | -marker-error - --flux-stepper-label | -label-current ## Do - Keep a wizard to three to six steps, each a coherent group of fields. - End on a review that reads back what will be submitted. - Keep answers when someone goes back a step. ## Do not - Do not make the steps clickable when they must be done in order. - Do not validate a step before someone tries to leave it. - Do not use a wizard for a form that fits on one screen.