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.

Used inside <hy-stepper> — it only means something as part of it.

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.

When not to use

• Content people switch to in any order: hy-tab-panel inside hy-tab-group.

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

The documented hooks. Every override hook the component reads — one per token it paints — is listed in @whitespaceux/harmony/theme-api.json, and @whitespaceux/harmony/component-bindings.json (the Harmony MCP get-bindings tool) says which part and state each one paints.

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