Skip to content

HyStep

A single step within an hy-stepper. Presentational by design — it carries the indicator metadata (label, description, icon, optional, disabled) that the parent reads to render the step rail, and exposes a default slot for the content shown when this step is the active one. Non-active steps hide their content (display: none).

The status property is owned by the parent hy-stepper — it derives completed / active / upcoming from active-step on every change. The one status you set yourself is error: author status="error" (or set it imperatively) and the parent preserves it through derivation, so a step stays flagged until you clear it. There is no separate error boolean — status="error" is the single source of truth.

Examples

Within a stepper

html
<hy-stepper active-step="1">
  <hy-step label="Account" description="Your details">
    <p>Account form…</p>
  </hy-step>
  <hy-step label="Shipping" description="Where to send it">
    <p>Shipping form…</p>
  </hy-step>
  <hy-step label="Review" optional>
    <p>Review &amp; submit…</p>
  </hy-step>
</hy-stepper>

Slots

  • default - Content shown when this step is the active step.

Built with Lit. Documented with VitePress.