// Generated by scripts/generate-showcase.mjs. Do not edit directly. page StepperDetail { layout = "showcase" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_steps = JSON.parse(ctx.url.searchParams.get("pg_steps") ?? "[{\"id\":\"stepper-0-1\",\"key\":\"stepper-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#stepper-demo\",\"actionHref\":\"#stepper-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"stepper-0-2\",\"key\":\"stepper-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#stepper-demo\",\"actionHref\":\"#stepper-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]") state playground_active = Number(ctx.url.searchParams.get("pg_active") ?? "0") state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" state playground_clickable = (ctx.url.searchParams.get("pg_clickable") ?? "false") === "true" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Stepper" state playground_showPanel = (ctx.url.searchParams.get("pg_showPanel") ?? "true") === "true" state playground_controls = (ctx.url.searchParams.get("pg_controls") ?? "false") === "true" state playground_allowSkip = (ctx.url.searchParams.get("pg_allowSkip") ?? "false") === "true" state playground_nextDisabled = (ctx.url.searchParams.get("pg_nextDisabled") ?? "false") === "true" state playground_backLabel = ctx.url.searchParams.get("pg_backLabel") ?? "Stepper" state playground_nextLabel = ctx.url.searchParams.get("pg_nextLabel") ?? "Stepper" state playground_skipLabel = ctx.url.searchParams.get("pg_skipLabel") ?? "Stepper" state playground_finishLabel = ctx.url.searchParams.get("pg_finishLabel") ?? "Stepper" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" seo { title = "Stepper" description = "Theme-aware, responsive stepper component." } view {
Navigation component

Stepper

Theme-aware, responsive stepper component.

16 props3 slots5 outputsTheme readyResponsive
Interactive playground

Configure Stepper

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<Stepper
  steps='[
    {
      "id": "stepper-0-1",
      "key": "stepper-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#stepper-demo",
      "actionHref": "#stepper-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "stepper-0-2",
      "key": "stepper-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#stepper-demo",
      "actionHref": "#stepper-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  label="Stepper"
  showPanel="true"
  backLabel="Stepper"
  nextLabel="Stepper"
  skipLabel="Stepper"
  finishLabel="Stepper">
  <div data-slot="step-{index}">
    <div class="showcase-slot">step-{index} slot</div>
  </div>
  <div data-slot="panel-{index}">
    <div class="showcase-slot">panel-{index} slot</div>
  </div>
</Stepper>
Event outputInteract with the preview to inspect the typed payload.
Component props16 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Horizontal progress

Steps before the active one read as complete, the active one is highlighted, and the rest are muted.

01
Live preview
Component usage.wrn
<Stepper
  steps='[
    {
      "label": "Account",
      "description": "Your details"
    },
    {
      "label": "Billing",
      "description": "Payment method"
    },
    {
      "label": "Confirm",
      "description": "Review and submit"
    }
  ]'
  active="1"
  label="Stepper">
  <div data-slot="step-{index}">
    <div class="showcase-slot">step-{index} slot</div>
  </div>
  <div data-slot="panel-{index}">
    <div class="showcase-slot">panel-{index} slot</div>
  </div>
</Stepper>
Recommended

Vertical with icons

Vertical orientation suits a sidebar or a narrow column. Any step may carry an iconify class instead of its number.

02
Live preview
Component usage.wrn
<Stepper
  size="sm"
  steps='[
    {
      "label": "Cloned",
      "icon": "icon-[lucide--git-branch]"
    },
    {
      "label": "Built",
      "icon": "icon-[lucide--hammer]"
    },
    {
      "label": "Deployed",
      "icon": "icon-[lucide--rocket]"
    }
  ]'
  active="2"
  orientation="vertical"
  label="Compact example">
  <div data-slot="step-{index}">
    <div class="showcase-slot">step-{index} slot</div>
  </div>
  <div data-slot="panel-{index}">
    <div class="showcase-slot">panel-{index} slot</div>
  </div>
</Stepper>
Advanced

Wizard with content and controls

showPanel renders each step body and shows only the active one, the same contract Tabs uses. controls adds Back, Skip and Next, which becomes Finish on the last step.

03
Live preview
Component usage.wrn
<Stepper
  size="lg"
  steps='[
    {
      "label": "Account",
      "title": "Your details",
      "content": "Name, email and a password."
    },
    {
      "label": "Billing",
      "title": "How you pay",
      "content": "Card or invoice."
    },
    {
      "label": "Confirm",
      "title": "Review",
      "content": "Check everything before submitting."
    }
  ]'
  active="1"
  label="Advanced example"
  showPanel="true"
  controls="true"
  allowSkip="true">
  <div data-slot="step-{index}">
    <div class="showcase-slot">step-{index} slot</div>
  </div>
  <div data-slot="panel-{index}">
    <div class="showcase-slot">panel-{index} slot</div>
  </div>
</Stepper>
Advanced

Held until the step is valid

The same wizard with nextDisabled set. The component never validates anything itself: the page owns the form, sets this while the step is incomplete, and clears it once the step passes.

04
Live preview
Component usage.wrn
<Stepper
  size="lg"
  steps='[
    {
      "label": "Account",
      "title": "Your details",
      "content": "This step is not complete yet."
    },
    {
      "label": "Billing",
      "title": "How you pay",
      "content": "Card or invoice."
    }
  ]'
  label="Advanced example"
  showPanel="true"
  controls="true"
  nextDisabled="true">
  <div data-slot="step-{index}">
    <div class="showcase-slot">step-{index} slot</div>
  </div>
  <div data-slot="panel-{index}">
    <div class="showcase-slot">panel-{index} slot</div>
  </div>
</Stepper>
Advanced

Clickable steps

With clickable the steps emit a change output and take arrow-key roving focus. Without it the stepper is read-only and stays out of the tab order.

05
Live preview
Component usage.wrn
<Stepper
  size="lg"
  steps='[
    {
      "label": "One"
    },
    {
      "label": "Two"
    },
    {
      "label": "Three"
    }
  ]'
  clickable="true"
  label="Advanced example">
  <div data-slot="step-{index}">
    <div class="showcase-slot">step-{index} slot</div>
  </div>
  <div data-slot="panel-{index}">
    <div class="showcase-slot">panel-{index} slot</div>
  </div>
</Stepper>
Component outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@changeFires when the component's committed value or selection changes.
@backFires when the component emits the back event.
@nextFires when the component emits the next event.
@skipFires when the component emits the skip event.
@finishFires when the component emits the finish event.
Declarative handlers.wrn
<Stepper
  @change='console.log(payload)'
  @back='console.log(payload)'
  @next='console.log(payload)'
  @skip='console.log(payload)'
  @finish='console.log(payload)'
/>
Direct output handlers.js
import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"Stepper\"], [data-component=\"Stepper\"]")

if (component) registerOutputHandler(component, "change", (payload) => {
  console.log("change", payload)
})

if (component) registerOutputHandler(component, "back", (payload) => {
  console.log("back", payload)
})

if (component) registerOutputHandler(component, "next", (payload) => {
  console.log("next", payload)
})

if (component) registerOutputHandler(component, "skip", (payload) => {
  console.log("skip", payload)
})

if (component) registerOutputHandler(component, "finish", (payload) => {
  console.log("finish", payload)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
colorstring"primary"No
sizestring"default"No
stepsunknown[][]No
activenumber0No
orientationstring"horizontal"No
clickablebooleanfalseNo
labelstring"Progress"No
showPanelbooleanfalseNo
controlsbooleanfalseNo
allowSkipbooleanfalseNo
nextDisabledbooleanfalseNo
backLabelstring"Back"No
nextLabelstring"Next"No
skipLabelstring"Skip"No
finishLabelstring"Finish"No
classstring""No
} }