C&C Docs
Log in

cnc-steps

A stepper showing where the user is in a sequence. Each step draws itself as completed, active or pending purely from its position relative to active — you say which step is current and the rest follows.

Quick start

Bind a list to steps and a step's LABEL to active. Everything before it renders completed with a check, everything after it pending.

  1. Account
  2. 2
    Details
  3. 3
    2
    Payment
  4. 4
    Confirm

active: Details 

<div x-data="{ current: 'Details' }">
  <cnc-steps
    $active="current"
    @change="current = $event.detail.step.label"
    $steps='[
      { "label": "Account", "icon": "heroicons/user" },
      { "label": "Details" },
      { "label": "Payment" }
    ]'
  ></cnc-steps>
</div>

Step fields

Field Purpose
label The step's caption AND its identity — active matches on it and the event carries it, so labels must be unique.
icon An icon for the step's dot, replacing both the number and the completed check.
completed Marks a step completed even when it sits AFTER the active one — for a flow the user has jumped back into. Steps before the active one are completed regardless.
badge A small marker on the step.

Usage guidance

The stepper is a DISPLAY, not a controller. It reports clicks and never changes step on its own, so handle change or the steps are decoration that looks interactive. Where jumping ahead should be refused, simply do not act on a change whose index is past the current one.

Labels are identities, so keep them unique and stable. Two steps sharing a label are indistinguishable, and renaming one drops the match — which silently sends the stepper back to step one rather than erroring.

Pair it with the widget that owns the content. cnc-slides for a wizard whose panels the user walks once, or a cnc-fieldset per stage; the stepper says where they are, it does not hold the steps.

← Back to Widgets