HyStep

Usage examples on this page are written for Lit / plain HTML (<hy-step>). The same component ships as HyStep in @whitespaceux/harmony-react (native React 19), with typed wrappers for Angular, Solid, Svelte, and Vue. The API reference below applies to all frameworks.

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

<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>

API

Properties

Property	Attribute	Type	Default	Description
label	label	string	''	The step's title, shown in the rail and used as the content's accessible name.
description	description	string	''	Optional secondary line shown beneath the label in the rail.
status	status	'upcoming' | 'active' | 'completed' | 'error'	'upcoming'	The step's status. Owned by the parent hy-stepper (derived from active-step), except error, which you set and the parent preserves.
icon	icon	string	''	Custom indicator icon name. When unset the rail shows the step number, a check (completed), or a warning (error).
disabled	disabled	boolean	false	Disables the step, making it non-navigable.
optional	optional	boolean	false	Renders an "Optional" caption beneath the label in the rail.
contentId	—	string	''	Stable id for the content region — referenced by the parent's rail button name sync.

Slots

Slot	Description
default	Content shown when this step is the active step.

CSS Parts

Part	Description
base	The step's content container.

CSS Custom Properties

Property	Description
--hy-step-padding	Inner padding of the content container. Default: var(--hy-padding-container-md).
--hy-step-radius	Corner radius of the content container. Default: var(--hy-radius-container-md).
--hy-step-background	Background of the content container. Default: var(--hy-background-surface-subtle).
--hy-step-border-color	Border color of the content panel. Default: var(--hy-background-brand-rest) — always the brand fill; the per-status cue lives in the rail indicator, not this border.
--hy-step-foreground	Text color of the content container. Default: var(--hy-foreground-default-rest).