components wizard

components/wizard

Import: import { Wizard } from "@tundralibs/ui/wizard"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

Wizard

Wizard(props: WizardProps): Html

Types

WizardStepStatus

• "pending"
• "active"
• "done"

WizardStep

Prop	Type	Required	Description
label	`string	Html`	yes
status	WizardStepStatus

WizardProps

Prop	Type	Required	Description
id	string
steps	WizardStep[]	yes
content	Html	yes
attrs	Attrs

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

A three-step checkout

Wizard({
  id: "checkout",
  steps: [{ label: "Cart", status: "done" }, { label: "Payment", status: "active" }, { label: "Review" }],
  content: html`<p>Card details go here.</p>`,
})

<div class="wizard" id="checkout">
  <ol class="wizard__steps">
    <li class="wizard__step wizard__step--done">
      <span class="wizard__step-index">&#10003;</span>
      <span class="wizard__step-label">Cart</span>
    </li>
    <li class="wizard__step wizard__step--active">
      <span class="wizard__step-index">2</span>
      <span class="wizard__step-label">Payment</span>
    </li>
    <li class="wizard__step">
      <span class="wizard__step-index">3</span>
      <span class="wizard__step-label">Review</span>
    </li>
  </ol>
  <div class="wizard__content">
    <p>Card details go here.</p>
  </div>
</div>

CSS hooks

Classes defined by components/wizard/wizard.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.wizard__step, .wizard__step--active, .wizard__step--done, .wizard__step-index, .wizard__step-label, .wizard__steps